0.2.2

bro.config.js

@@ -1,12 +1,13 @@
-const pkg = require('./package')
+const pkg = require("./package");
 
 module.exports = {
-  apiPath: 'stubs/api',
+  apiPath: "stubs/api",
   webpackConfig: {
     output: {
-      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
-    }
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
+    },
   },
+  /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
     'enterfront.main': '/enterfront',
     'enterfront.home': '/enterfront/home',
@@ -16,11 +17,11 @@ module.exports = {
     'enterfront.chat': '/enterfront/chat',
   },
   features: {
-    'undefined': {
+    "enterfront": {
       // add your features here in the format [featureName]: { value: string }
     },
   },
   config: {
-    'undefined.api': '/api',
-  }
-}
+    "enterfront.api": "/api",
+  },
+};

images/chat.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 58 58" xml:space="preserve">
+<g>
+	<path style="fill:#FFA500FF;" d="M25,9.586C11.193,9.586,0,19.621,0,32c0,4.562,1.524,8.803,4.135,12.343
+		C3.792,48.433,2.805,54.194,0,57c0,0,8.47-1.191,14.273-4.651c0.006-0.004,0.009-0.01,0.014-0.013
+		c1.794-1.106,3.809-2.397,4.302-2.783c0.301-0.417,0.879-0.543,1.328-0.271c0.298,0.181,0.487,0.512,0.488,0.86
+		c0.003,0.582-0.008,0.744-3.651,3.018c2.582,0.81,5.355,1.254,8.245,1.254c13.807,0,25-10.035,25-22.414S38.807,9.586,25,9.586z"/>
+	<path style="fill:#EF9400FF;" d="M58,23.414C58,11.035,46.807,1,33,1c-9.97,0-18.575,5.234-22.589,12.804
+		C14.518,11.153,19.553,9.586,25,9.586c13.807,0,25,10.035,25,22.414c0,4.735-1.642,9.124-4.437,12.743
+		C51.162,47.448,58,48.414,58,48.414c-2.805-2.805-3.792-8.566-4.135-12.657C56.476,32.217,58,27.976,58,23.414z"/>
+	<path style="fill:#FFFFFF;" d="M32.5,26h-14c-0.552,0-1-0.447-1-1s0.448-1,1-1h14c0.552,0,1,0.447,1,1S33.052,26,32.5,26z"/>
+	<path style="fill:#FFFFFF;" d="M38,33H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,33,38,33z"/>
+	<path style="fill:#FFFFFF;" d="M38,40H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,40,38,40z"/>
+</g>
+</svg>

images/chat2.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 58 58" xml:space="preserve">
+<g>
+	<path style="fill:#0391FD;" d="M25,9.586C11.193,9.586,0,19.621,0,32c0,4.562,1.524,8.803,4.135,12.343
+		C3.792,48.433,2.805,54.194,0,57c0,0,8.47-1.191,14.273-4.651c0.006-0.004,0.009-0.01,0.014-0.013
+		c1.794-1.106,3.809-2.397,4.302-2.783c0.301-0.417,0.879-0.543,1.328-0.271c0.298,0.181,0.487,0.512,0.488,0.86
+		c0.003,0.582-0.008,0.744-3.651,3.018c2.582,0.81,5.355,1.254,8.245,1.254c13.807,0,25-10.035,25-22.414S38.807,9.586,25,9.586z"/>
+	<path style="fill:#0F71D3;" d="M58,23.414C58,11.035,46.807,1,33,1c-9.97,0-18.575,5.234-22.589,12.804
+		C14.518,11.153,19.553,9.586,25,9.586c13.807,0,25,10.035,25,22.414c0,4.735-1.642,9.124-4.437,12.743
+		C51.162,47.448,58,48.414,58,48.414c-2.805-2.805-3.792-8.566-4.135-12.657C56.476,32.217,58,27.976,58,23.414z"/>
+	<path style="fill:#FFFFFF;" d="M32.5,26h-14c-0.552,0-1-0.447-1-1s0.448-1,1-1h14c0.552,0,1,0.447,1,1S33.052,26,32.5,26z"/>
+	<path style="fill:#FFFFFF;" d="M38,33H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,33,38,33z"/>
+	<path style="fill:#FFFFFF;" d="M38,40H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,40,38,40z"/>
+</g>
+</svg>

package.json

@@ -1,21 +1,25 @@
 {
     "dependencies": {
+        "@brojs/cli": "^1.0.0",
+        "@brojs/create": "^1.0.0",
         "@ijl/cli": "^5.1.0",
         "@types/react": "^18.3.5",
         "@types/react-dom": "^18.3.0",
         "express": "^4.19.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.26.1",
+        "styled-components": "^6.1.13",
         "typescript": "^5.5.4"
     },
     "main": "./src/index.tsx",
     "scripts": {
-        "start": "ijl-cli server --port=8099 --with-open-browser",
-        "build": "npm run clean && ijl-cli build --dev",
-        "build:prod": "npm run clean && ijl-cli build",
+        "start": "brojs server --port=8099 --with-open-browser",
+        "build": "npm run clean && brojs build --dev",
+        "build:prod": "npm run clean && brojs build",
         "clean": "rimraf dist"
     },
     "name": "enterfront",
-    "version": "0.2.1"
+    "version": "0.2.2"
 }

src/__data__/urls.ts

@@ -1,4 +1,4 @@
-import { getNavigations, getNavigationsValue } from '@ijl/cli';
+import { getNavigations, getNavigationsValue } from '@brojs/cli';
 import pkg from '../../package.json';
 
 const baseUrl = getNavigationsValue(`${(pkg as any).name}.main`);

src/app.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
-import "./index.css"
 import { Dashboard } from './dashboard';
 
-import Interlocutor from './backend/interlocutor/Interlocutor.js'
-import User from './backend/user/User.js'
+import './index.css'
 
 const App = () => {
   return(
-    <BrowserRouter>
-      <Dashboard/>
-    </BrowserRouter>
+      <BrowserRouter>
+        <Dashboard />
+      </BrowserRouter>
   )
 }
 
 export default App;
-

src/components/css/index.css

@@ -1 +0,0 @@
-@import "../reg/css/index.css";

src/components/home/Card.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+
+import styled from "styled-components";
+
+const Card = (props) => {
+    const interlocutorId = props.id
+
+    const hexToRgb = (hex) => {
+        hex = hex.replace(/^#/, '');
+
+        let r = parseInt(hex.slice(0, 2), 16);
+        let g = parseInt(hex.slice(2, 4), 16);
+        let b = parseInt(hex.slice(4, 6), 16);
+
+        return `${r}, ${g}, ${b}`;
+    }
+
+    const handleClick = (event, id) => {
+        localStorage.setItem('interlocutorId', id);
+    };
+
+    const StyledCard = styled.div`
+        box-shadow: 0 10px 40px rgba(176, 175, 189, 0.85);
+
+        padding: 2vw;
+
+        display: flex;
+        flex-direction: column;
+
+        border-radius: 2vw;
+
+        align-items: flex-start;
+        justify-content: space-between;
+
+        background-color: ${props => props.color 
+                ? `rgba(${hexToRgb(props.color)}, 0.63)` 
+                : 'rgba(255, 255, 255, 0.63)'};
+
+        transition: box-shadow 0.3s ease-in;
+        
+        div, h2 {
+            transition: color 0.3s ease-in;
+        }
+
+        &:hover {
+            box-shadow: 0 10px 40px rgb(${hexToRgb(props.color)});
+            cursor: pointer;
+            
+            div, h2 {
+                color: white;
+            }
+        }
+
+        @media only screen and (max-width: 800px) {
+            flex-direction: column;
+            
+            border-radius: 2vh;
+            padding: 3vw;
+        }
+    `
+
+  return (
+      <a
+          href={URLs.chat.url}
+          className="ChatCard"
+          onClick={(event) => handleClick(event, interlocutorId)}
+      >
+          <StyledCard color={props.color}>
+              <h2>{props.name}</h2>
+              <div className="lastMessageStyle">{props.lastMessage}</div>
+          </StyledCard>
+      </a>
+  );
+};
+
+export default Card;

src/components/home/ChatsList.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Card from "./Card.jsx";
+
+const ChatsList = (props) => {
+    const { chats } = props;
+
+    const colorMap = {
+        orange: 'FFA500FF',
+        aqua: '00FFFFFF',
+        crimson: 'DC143CFF',
+        red: 'FF0000FF',
+        violet: '8A2BE2FF',
+        seagreen: '20B2AAFF',
+        green: 'ADFF2FFF',
+        blue: '0000FFFF',
+        pink: 'FF1493FF',
+        cyan: '72FAFAFF'
+    }
+
+    function getColor(chatId) {
+        const keys = Object.keys(colorMap);
+        const index = chatId % keys.length;
+        return colorMap[keys[index]];
+    }
+
+  return (
+      <div className="ChatsList">
+          {chats.map((item, index) => (
+              <Card
+                  key={index}
+                  name={item.name}
+                  lastMessage={item.lastMessage}
+                  id={item.id}
+                  color={getColor(item.id)}
+              />
+          ))}
+      </div>
+  );
+};
+
+export default ChatsList;

src/components/home/Header.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+import { FaHome } from 'react-icons/fa';
+
+const Header = () => {
+  return (
+      <a href={URLs.account.url} className="accountLink">
+          <FaHome className="houseIcon"/>
+          <p>My profile</p>
+      </a>
+  );
+};
+
+export default Header;

src/components/home/HomeTitle.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import chatIcon from './../../../images/chat.svg';
+import { URLs } from "../../__data__/urls";
+
+const HomeTitle = () => {
+  return (
+      <a className="homeTitleWrapper" href={URLs.baseUrl}>
+          <h1 className="montecarlo-regular homeTitle">Enterfront</h1>
+          <img src={chatIcon} alt="Chat Icon" className="chatIcon"/>
+      </a>
+  );
+};
+
+export default HomeTitle;

src/components/home/css/accountLink.css

@@ -0,0 +1,38 @@
+.houseIcon {
+    transition: color 0.3s ease-in;
+}
+
+.accountLink {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.accountLink p {
+    font-size: 1.5vw;
+    transition: color 0.3s ease-out;
+}
+
+.accountLink svg {
+    font-size: 3vw;
+    transition: fill 0.3s ease-in;
+}
+
+.accountLink:hover p {
+    color: white;
+}
+
+.accountLink:hover svg {
+    fill: orange;
+}
+
+@media only screen and (max-width: 800px) {
+    .accountLink p {
+        font-size: 1.8vh;
+    }
+
+    .accountLink svg {
+        font-size: 4vh;
+    }
+}

src/components/home/css/card.css

@@ -0,0 +1,46 @@
+.ChatsList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    margin: 3rem;
+}
+
+.ChatCard {
+    margin-bottom: 40px;
+    max-width: 30vw;
+    min-width: 20vw;
+
+    margin-left: 1.2vw;
+    margin-right: 1.2vw;
+
+    border-radius: 2vw;
+
+    transition: transform 0.2s ease-in;
+}
+
+.lastMessageStyle {
+    width: 80%;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media only screen and (max-width: 800px) {
+    .ChatCard {
+        width: 30vw;
+        max-width: 30vw;
+
+        margin-left: 4vw;
+        margin-right: 4vw;
+    }
+
+    .ChatsList {
+        margin: 10vw;
+    }
+}
+
+.ChatCard:hover {
+    transform: translate(2px, -10px);
+}

src/components/home/css/homeTitle.css

@@ -0,0 +1,25 @@
+.homeTitleWrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+.homeTitle {
+    font-size: 5vw;
+    transition: color 0.3s ease-in;
+}
+
+.homeTitleWrapper:hover h1 {
+    color: orange;
+}
+
+
+@media only screen and (max-width: 800px) {
+    .homeTitle {
+        font-size: 8vh;
+    }
+}
+
+.chatIcon {
+    width: 6vw;
+    margin-left: 3vw;
+}

src/components/home/index.css

@@ -0,0 +1,3 @@
+@import url("./css/card.css");
+@import url("./css/homeTitle.css");
+@import url("./css/accountLink.css");

src/components/index.css

@@ -0,0 +1,27 @@
+@import url("reg/index.css");
+@import url("init/index.css");
+@import url("home/index.css");
+
+.MyButton {
+    text-decoration: none;
+    border: 2px solid black;
+    border-radius: 10px;
+
+    background-color: black;
+    color: white;
+
+    padding: 15px;
+
+    justify-content: center;
+
+    width: 9rem;
+
+    transition: background-color 0.2s ease-in, border 0.2s ease-in;
+}
+
+.MyButton:hover {
+    background-color: orange;
+    border: 2px solid orange;
+
+    cursor: pointer;
+}

src/components/init/InitTitle.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const InitTitle = () => {
+  return (
+      <h1 className="metal-mania-regular initTitle">Enterfront</h1>
+  );
+};
+
+export default InitTitle;

src/components/init/NavButton.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+const NavButton = (props) => {
+  return (
+      <a className="MyButton singleNavButton" href={props.nav}>
+          <p className="mclaren-regular">{props.text}</p>
+      </a>
+  );
+};
+
+export default NavButton;

src/components/init/css/initTitle.css

@@ -0,0 +1,13 @@
+.initTitle {
+    font-size: 7vw;
+    margin: 0;
+    color: white;
+
+    text-align: center;
+}
+
+@media only screen and (max-width: 800px) {
+    .initTitle {
+        font-size: 8vh;
+    }
+}

src/components/init/css/navButton.css

@@ -0,0 +1,19 @@
+.MyButton.singleNavButton {
+    display: flex;
+    align-items: center;
+
+    margin-top: 1.5vw;
+    padding: 0;
+
+    background-color: white;
+    border-color: white;
+    border-radius: 3vw;
+
+    min-width: 20vw;
+}
+
+.MyButton.singleNavButton p {
+    font-size: 1.4vw;
+    font-weight: bold;
+}
+

src/components/init/index.css

@@ -0,0 +1,2 @@
+@import url("./css/navButton.css");
+@import url("./css/initTitle.css");

src/components/reg/InputField.jsx

@@ -2,10 +2,14 @@ import React from 'react';
 
 const InputField = (props) => {
   return (
-      <input
-          onChange={(e) => props.setValue(e.target.value)}
-          value={props.value}
-      />
+      <div>
+          <p>{props.title}</p>
+          <input
+              onChange={(e) => props.setValue(e.target.value)}
+              value={props.value}
+              className="Input"
+          />
+      </div>
   );
 };
 

src/components/reg/LoginButtons.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+
+const LoginButtons = (props) => {
+    const ref = props.isAuth ? URLs.reg.url : URLs.auth.url
+
+  return (
+      <div>
+          <div className="LoginButtons">
+              <a className="MyButton loginButton" onClick={() => (
+                  props.submitHandler()
+              )}>
+                  {props.isAuth
+                      ? <p className="mclaren-regular">Login</p>
+                      : <p className="mclaren-regular">Register</p>}
+              </a>
+
+              <a className="MyButton loginButton" href={ref}>
+                  {props.isAuth
+                      ? <p className="mclaren-regular">Registration</p>
+                      : <p className="mclaren-regular">I have an account</p>}
+              </a>
+          </div>
+      </div>
+  );
+};
+
+export default LoginButtons;

src/components/reg/css/login.css

@@ -0,0 +1,58 @@
+.LoginButtons {
+    margin-top: 5rex;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+}
+
+.LoginButtons a {
+    margin-bottom: 15px;
+    width: 12rem;
+    display: flex;
+}
+
+.Input {
+    border: 0;
+    background-color: black;
+    color: orange;
+    border-radius: 5px;
+
+    padding: 10px;
+
+    width: 18rem;
+}
+
+.MyButton.loginButton {
+    padding: 0;
+}
+
+.MyButton.loginButton p {
+    color: orange;
+    transition: color 0.3s ease-in;
+
+    font-size: 1.3vw;
+    font-weight: 500;
+}
+
+.loginTitle {
+    font-size: 4vw;
+
+    transition: color 0.3s ease-in;
+}
+
+.loginTitle:hover {
+    color: orange;
+}
+
+@media only screen and (max-width: 800px) {
+    .MyButton.loginButton p {
+        font-size: 1.5vh;
+    }
+}
+
+.loginButton:hover p {
+    color: black;
+}
+

src/components/reg/index.css

@@ -0,0 +1 @@
+@import url("./css/login.css");

src/components/reg/loginTitle.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+
+const LoginTitle = () => {
+  return (
+      <a href={URLs.baseUrl}>
+          <h1 className="loginTitle mclaren-regular">Enterfront</h1>
+      </a>
+  );
+};
+
+export default LoginTitle;

src/header/Header.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Header = () => {
-  return (
-      <div>Header</div>
-  );
-};
-
-export default Header;

src/index.css

@@ -1,6 +1,10 @@
-@import "pages/css/index.css";
-@import "header/css/index.css";
-@import "components/css/index.css";
+@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=McLaren&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
+
+@import url("pages/index.css");
+@import url("components/index.css");
 
 
 body {
@@ -12,3 +16,45 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+* {
+    font-size: 1.2vw;
+    font-family: "Montserrat", 'sans-serif';
+    color: black;
+    text-decoration: none;
+}
+
+/* Mobile devices */
+@media only screen and (max-width: 800px) {
+    * {
+        font-size: 1.5vh;
+    }
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+.metal-mania-regular {
+    font-family: "Metal Mania", system-ui;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.mclaren-regular {
+    font-family: "McLaren", system-ui;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.montecarlo-regular {
+    font-family: "MonteCarlo", cursive;
+    font-weight: 400;
+    font-style: normal;
+}
+
+

src/pages/Chat.jsx

@@ -1,8 +1,20 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
 const Chat = () => {
+    const [interlocutorId, setInterlocutorId] = useState(0); // State to hold the interlocutorId
+
+    function getInterlocutorId() {
+      const id = localStorage.getItem('interlocutorId');
+      return id ? id : 0;
+    }
+
+    useEffect(() => {
+      const id = getInterlocutorId();
+      setInterlocutorId(id);
+    }, []);
+
   return (
-      <h2>Chat with ...</h2>
+      <h2>Chat with ... (id = {interlocutorId})</h2>
   );
 };
 

src/pages/Home.jsx

@@ -1,8 +1,75 @@
 import React from "react";
+import HomeTitle from "../components/home/HomeTitle.jsx";
+import ChatsList from "../components/home/ChatsList.jsx";
+import Header from "../components/home/Header.jsx";
 
 const Home = () => {
-  return (
-      <h1 className="TestClass">Home</h1>
+
+    // temp for testing
+    const chats = [
+        {
+            name: "Alice Johnson",
+            id: 123456,
+            lastMessage: "See you later!"
+        },
+        {
+            name: "Bob Smith",
+            id: 654321,
+            lastMessage: "Got it, thanks!"
+        },
+        {
+            name: "Charlie Brown",
+            id: 234567,
+            lastMessage: "How's the project going? How's the project going? How's the project going?" +
+                "How's the project going? How's the project going?"
+        },
+        {
+            name: "David Clark",
+            id: 765432,
+            lastMessage: "I'll send the files."
+        },
+        {
+            name: "Eve Adams",
+            id: 345678,
+            lastMessage: "Let's meet tomorrow."
+        },
+        {
+            name: "Frank Wright",
+            id: 876543,
+            lastMessage: "Can you review this?"
+        },
+        {
+            name: "Grace Lee",
+            id: 456789,
+            lastMessage: "Thanks for your help!"
+        },
+        {
+            name: "Hannah Scott",
+            id: 987654,
+            lastMessage: "See you at the meeting."
+        },
+        {
+            name: "Ian Davis",
+            id: 567890,
+            lastMessage: "Let me know when you're free."
+        },
+        {
+            name: "Jill Thompson",
+            id: 678901,
+            lastMessage: "I'll catch up with you later."
+        }
+    ];
+
+    return (
+      <div className="homeWrapper">
+          <div className="headerPos">
+              <Header/>
+          </div>
+
+          <HomeTitle/>
+          <p>Your chats</p>
+          <ChatsList chats={chats} />
+      </div>
   )
 }
 

src/pages/Init.jsx

@@ -1,8 +1,21 @@
 import React from "react";
+import NavButton from "../components/init/NavButton.jsx";
+import {URLs} from "../__data__/urls";
+import InitTitle from "../components/init/InitTitle.jsx";
 
 const Init = () => {
   return (
-      <h1 className="TestInit">Init page</h1>
+      <div className="backgroundImage">
+          <div className="blurEffect"></div>
+          <div className="overBlur initTitlePos">
+              <InitTitle/>
+          </div>
+          <div className="navButtons overBlur">
+              <NavButton nav={URLs.home.url} text={"Start chatting"}/>
+              <NavButton nav={URLs.auth.url} text={"Sign In"}/>
+              <NavButton nav={URLs.reg.url} text={"Sign Up"}/>
+          </div>
+      </div>
   )
 }
 

src/pages/SignIn.jsx

@@ -1,11 +1,26 @@
-import React from 'react';
+import React, {useState} from 'react';
 import InputField from "../components/reg/InputField.jsx";
+import LoginButtons from "../components/reg/LoginButtons.jsx";
+import LoginTitle from "../components/reg/loginTitle.jsx";
 
 const SignIn = () => {
+    const [name, setName] = useState("");
+    const [password, setPassword] = useState("");
+
+    const submit = (e) => {
+      console.log('Sign In!')
+    }
+
   return (
-      <div>
-        <h1>SignIn</h1>
-        <InputField/>
+      <div className="LoginList">
+          <LoginTitle/>
+          <InputField title="Name" setValue={setName} value={name}/>
+          <InputField title="Password" setValue={setPassword} value={password}/>
+
+          <LoginButtons
+              submitHandler={submit}
+              isAuth={true}
+          />
       </div>
   );
 };

src/pages/SignUp.jsx

@@ -1,13 +1,30 @@
-import React from 'react';
+import React, {useState} from 'react';
 import InputField from "../components/reg/InputField.jsx";
+import LoginButtons from "../components/reg/LoginButtons.jsx";
+import LoginTitle from "../components/reg/loginTitle.jsx";
 
 const SignUp = () => {
-  return (
-      <div>
-        <h1>SignUp</h1>
-        <InputField/>
-      </div>
-  );
+    const [name, setName] = useState("");
+    const [password, setPassword] = useState("");
+    const [repeatPassword, setRepeatPassword] = useState("");
+
+    const submit = (e) => {
+        console.log('Sign Up!')
+    }
+
+    return (
+        <div className="LoginList">
+            <LoginTitle/>
+            <InputField title="Name" setValue={setName} value={name}/>
+            <InputField title="Password" setValue={setPassword} value={password}/>
+            <InputField title="Repeat Password" setValue={setRepeatPassword} value={repeatPassword}/>
+
+            <LoginButtons
+                submitHandler={submit}
+                isAuth={false}
+            />
+        </div>
+    );
 };
 
 export default SignUp;

src/pages/css/home.css

@@ -0,0 +1,31 @@
+.homeWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.homeWrapper p {
+    font-size: 2.5vw;
+    font-weight: 500;
+    margin-top: 0;
+}
+
+@media only screen and (max-width: 800px) {
+    .homeWrapper p {
+        font-size: 3vh;
+    }
+}
+
+.ChatsList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    margin: 3rem;
+}
+
+.headerPos {
+    position: absolute;
+    top: 3vw;
+    right: 3vw;
+}

src/pages/css/index.css

@@ -1,5 +0,0 @@
-@import "init.css";
-
-.TestClass {
-    color: red;
-}

src/pages/css/init.css

@@ -1,3 +1,45 @@
-.TestInit {
-    color: blue;
-}
+.backgroundImage {
+    width: 100%;
+    height: 100vh;
+
+    background-color: darkgray;
+    background-size: cover;
+    background-position: center;
+
+    position: relative;
+}
+
+.blurEffect {
+    width: 100%;
+    height: 100%;
+
+    background-image: url("./../../../images/home_wp.jpg");
+    background-size: cover;
+    background-position: center;
+
+    filter: blur(10px);
+
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.overBlur {
+    position: relative;
+    z-index: 2;
+}
+
+.initTitlePos {
+    top: 10%;
+}
+
+.navButtons {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+
+    top: 17%;
+}

src/pages/css/input.css

@@ -0,0 +1,8 @@
+.LoginList {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    margin-top: 2rem;
+}

src/pages/index.css

@@ -0,0 +1,3 @@
+@import url("css/init.css");
+@import url("css/home.css");
+@import url("css/input.css");

tsconfig.json

@@ -22,4 +22,4 @@
         "**/*.test.tsx",
         "node_modules/@types/jest"
     ]        
-}
+}