added redux

2022-12-26 22:39:33 +05:00
commit 2838655cd4
156 changed files with 35988 additions and 0 deletions
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
@@ -0,0 +1,61 @@
+{
+  "name": "pixelstreaming",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.9.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.59",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
+    "@types/socket.io": "^3.0.2",
+    "framer-motion": "^7.4.0",
+    "freeice": "^2.2.2",
+    "html-react-parser": "^3.0.4",
+    "peer": "^0.6.1",
+    "peerjs": "^1.4.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-player": "^2.11.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
+    "socket.io": "^4.5.3",
+    "socket.io-client": "^4.5.3",
+    "typescript": "^4.8.3",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-transition-group": "^4.4.5"
+  }
+}
@@ -0,0 +1,14 @@
+<IfModule mod_rewrite.c>
+
+
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{REQUEST_FILENAME} !-l
+  RewriteRule . /index.html [L]
+  FallbackResource ./index.html
+
+
+</IfModule>
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
@@ -0,0 +1,69 @@
+.background {
+  background-image: url(./images/background.png);
+  height: 100vh;
+  width: 100%;
+  background-size: cover;
+}
+
+.blur {
+  backdrop-filter: blur(12px);
+  height: 100vh;
+  width: 100%;
+  position: relative;
+}
+
+.content__container {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  top: 25%;
+  width: 100%;
+}
+
+.content__player {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: auto;
+  overflow: hidden;
+  width: 100%;
+
+}
+
+.content__container_off {
+  display: none;
+}
+
+@media screen and (max-width: 639px) {
+  .content__container {
+    display: block;
+    position: static;
+  }
+
+  .background {
+    background-image: none;
+    background-color: #262626;
+  }
+
+  .blur {
+    position: relative;
+    overflow: hidden;
+  }
+}
+
+.demos__tittle {
+  margin: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 48px;
+  line-height: 100%;
+  /* or 40px */
+  margin-bottom: 56px;
+
+  color: #ffffff;
+}
+
+.demos_container {
+  background: #141414;
+  border-radius: 16px;
+}
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
@@ -0,0 +1,139 @@
+import "./App.css";
+import { useEffect, useState } from "react";
+import { Route, Switch, useHistory } from "react-router-dom";
+
+import { Header } from "./components/header/header";
+import { Demos } from "./components/demos/demos";
+import { Main } from "./components/Main/Main";
+import { PlayerComponent } from "./components/playerComponent/playerComponent";
+
+import { useAppDispatch, useAppSelector } from "./hooks/redux";
+import { fetchCards } from "./store/reducers/ActionCreator";
+import { cardSlice } from "./store/reducers/cardSlice";
+import { ICards } from "./models/ICards";
+import textRU from "./utils/textRU";
+import textEN from "./utils/textEN";
+
+
+function App() {
+  const [language, setLanguage] = useState<string>("");
+  const [text, setText] = useState(textRU);
+  const [visible, setVisible] = useState({
+    popup1: true,
+    popup2: false,
+  });
+
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+  const { handleCurrentCard } = cardSlice.actions;
+  const { cards } = useAppSelector((state) => state.cardReducer);
+  const savedLanguage = localStorage.getItem("savedLang");
+
+  useEffect(() => {
+    dispatch(fetchCards());
+  }, []);
+
+  const handleCards = (card: ICards) => {
+    dispatch(handleCurrentCard(card));
+    history.push("/connect-page");
+  };
+
+  const closeStream = () => {
+    history.push("/");
+  };
+
+  useEffect(() => {
+    if (savedLanguage !== null) {
+      setSavedLanguage();
+    } else {
+      setInitialLanguage();
+    }
+  }, []);
+
+  function setSavedLanguage() {
+    if (savedLanguage === "RU") {
+      setLanguage("RU");
+      localStorage.setItem("lang", "RU");
+      setText(textRU);
+    } else if (savedLanguage === "EN") {
+      setLanguage("EN");
+      localStorage.setItem("lang", "EN");
+      setText(textEN);
+    }
+  }
+
+  function setInitialLanguage() {
+    if (window.navigator.language === "ru") {
+      setLanguage("RU");
+      localStorage.setItem("lang", "RU");
+      setText(textRU);
+    } else {
+      setLanguage("EN");
+      setText(textEN);
+    }
+  }
+
+  function changeLanguage(language: string) {
+    if (language === "RU") {
+      setLanguage(language);
+      setText(textRU);
+      localStorage.setItem("savedLang", "RU");
+      localStorage.setItem("lang", "RU");
+    } else {
+      setLanguage("EN");
+      localStorage.setItem("lang", "EN");
+      localStorage.setItem("savedLang", "EN");
+      setText(textEN);
+    }
+  }
+
+  return (
+    <Switch>
+      <Route exact path="/">
+        <Header
+          text={text.footer}
+          language={language}
+          changeLanguage={changeLanguage}
+        ></Header>
+        <div className="main">
+          <h3 className="demos__tittle">{text.demos.title}</h3>
+          <div className="demo__container">
+            {cards.map((i: any) => (
+              <Demos
+                onClick={() => handleCards(i)}
+                key={i._id}
+                item={i}
+              ></Demos>
+            ))}
+          </div>
+        </div>
+      </Route>
+      <Route path="/connect-page">
+        <div className="background">
+          <div className="blur">
+            <Header
+              text={text.footer}
+              language={language}
+              changeLanguage={changeLanguage}
+            ></Header>
+            <div className="content__container">
+              <Main
+                visible={visible}
+                setVisible={setVisible}
+                text={text}
+              ></Main>
+            </div>
+          </div>
+        </div>
+      </Route>
+      <Route exact path="/stream/:id">
+        <PlayerComponent
+          dispatch={dispatch}
+          closeStream={closeStream}
+        ></PlayerComponent>
+      </Route>
+    </Switch>
+  );
+}
+
+export default App;
@@ -0,0 +1,24 @@
+import { ControlButton } from "../ui/ControlButton/ControlButton";
+import { MicroButton } from "../ui/MicroButton/MicroButton";
+import { ShareButton } from "../ui/ShareButton/ShareButton";
+import { LanguageButton } from "../ui/LanguageButton/LanguageButton";
+import { ExitButton } from "../ui/ExitButton/ExitButton";
+import React, { useState, useEffect } from "react";
+
+export const ControlPanel: React.FC<any> = ({
+  handleOpenSharePopup,
+  handleOpenExitPopup,
+}) => {
+  return (
+    <div className="toolbar-field-part">
+      <div className="toolbar-button-container-border-line"></div>
+      <ControlButton onClick={() => console.log("click!")}></ControlButton>
+      <MicroButton></MicroButton>
+      <div className="toolbar-button-container-border-line"></div>
+      <ShareButton onClick={handleOpenSharePopup}></ShareButton>
+      <LanguageButton onClick={() => console.log("click!")}></LanguageButton>
+      <div className="toolbar-button-container-border-line"></div>
+      <ExitButton onClick={handleOpenExitPopup}></ExitButton>
+    </div>
+  );
+};
@@ -0,0 +1,60 @@
+.exit-popup-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 494px;
+    height: 330px;
+    box-sizing: border-box;
+    border: 1px solid #4F4F4F;
+    border-radius: 32px;
+    top: calc(50% - 469px / 2);
+    left: calc(50% - 494px / 2);
+    background-color: #333333;
+    color: #FFFFFF;
+    padding: 48px;
+    /* gap: 24px; */
+    justify-content: space-between;
+}
+
+.exit-popup-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.exit-popup-button {
+    border-radius: 12px;
+    border: none;
+    color: white;
+    height: 60px;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    cursor: pointer;
+}
+
+.exit-popup-button_confirm {
+    background: #567ECE;
+    opacity: 1;
+
+}
+
+.exit-popup-button_finish {
+    background: #404040;
+}
+
+.exit-popup-button-title {
+    width: 366px;
+
+}
+
+.exit-popup-button_confirm:hover {
+    opacity: 0.7;
+    transition: .3s;
+
+} 
+
+.exit-popup-header {
+    align-items: normal;
+}
@@ -0,0 +1,19 @@
+import '../PopupShare/sharePopup.css'
+import './ExitPopup.css'
+import { TSidebarPopup } from '../../utils/types'
+
+export const ExitPopup: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
+
+    return (
+        <div className='exit-popup-container'>
+            <div className='mobile-users-part-header exit-popup-header'>
+                <span className='mobile-users-part-header-title exit-popup-button-title'>Вы уверены, что хотите закончить демонстрацию?</span>
+                <button onClick={() => setClose()} className='mobile-users-part-header-close-button'></button>
+            </div>
+            <div className='exit-popup-button-container'>
+                <button onClick={() => setClose()} className='exit-popup-button exit-popup-button_confirm'>Остаться</button>
+                <button onClick={() => onExit?.()} className='exit-popup-button exit-popup-button_finish'>Закончить</button>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,12 @@
+import '../sidebar/toolbar.css'
+
+export const LanguagePopup: React.FC<any> = ({ setOpen}) => {
+    return (<div className="toolbar-language-popup">
+        <div className='toolbar-button-area '>
+            <button onClick={() => setOpen(false)} className='toolbar-button toolbar-button.language.ru'>RU</button>
+        </div>
+        <div className='toolbar-button-area '>
+            <button onClick={() => setOpen(false)} className='toolbar-button toolbar-button.language.en'>EN</button>
+        </div>
+    </div>)
+}
@@ -0,0 +1,64 @@
+import "./main.css";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+import { PopupConnect } from "../popupConnect/popupConnect";
+import { PopupConnectEx } from "../popupConnectEx/popupConnectEx";
+import { popupAnimation } from "../../utils/animationProps";
+import { useAppDispatch, useAppSelector } from "../../hooks/redux";
+import {
+  createSession,
+  connectSession,
+} from "../../store/reducers/ActionCreator";
+
+export const Main: React.FC<any> = ({ text, visible, setVisible }) => {
+  const [value, setValue] = useState<string>("");
+  const dispatch = useAppDispatch();
+  const { popup1, popup2 } = visible;
+  const { currentCard, isLoading } = useAppSelector(
+    (state) => state.cardReducer
+  );
+
+  return (
+    <AnimatePresence mode="wait">
+      {popup1 && (
+        <motion.div
+          key={1}
+          variants={popupAnimation}
+          initial={"hidden"}
+          animate={"show"}
+          exit={"hidden"}
+        >
+          <PopupConnect
+            isLoading={isLoading}
+            logo={currentCard?.image.logo}
+            onConnect={() => dispatch(createSession(currentCard.title))}
+            text={text.popupConnect}
+            visible={visible}
+            setVisible={setVisible}
+          ></PopupConnect>
+        </motion.div>
+      )}
+      {popup2 && (
+        <motion.div
+          key={2}
+          variants={popupAnimation}
+          initial={"hidden"}
+          animate={"show"}
+          exit={"hidden"}
+        >
+          <PopupConnectEx
+            value={value}
+            setValue={setValue}
+            isLoading={isLoading}
+            logo={currentCard?.image.logo}
+            onConnect={() => dispatch(connectSession(value))}
+            visible={visible}
+            setVisible={setVisible}
+            text={text.popupConnectEx}
+          ></PopupConnectEx>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,112 @@
+.navigation {
+    display: flex;
+    flex-direction: column;
+    color: #E3DDE5;
+    padding: 8px 10px;
+    box-sizing: border-box;
+    position: fixed;
+    top: 66px;
+    right: 0;
+    bottom: 0;
+    background: #0E0E0E;
+    width: 100%;
+    z-index: 3;
+    overflow-y: scroll;
+}
+
+
+
+.nav__close {
+    cursor: pointer;
+    object-fit: cover;
+    width: 24px;
+
+}
+
+.button__container {
+}
+
+
+
+.nav__header {
+    display: flex;
+    flex-direction: column;
+    gap: 42px;
+}
+
+.logo {
+    width: 31px;
+    height: 50px;
+}
+
+.button__nav_container {
+    margin-top: 28px;
+    padding: 1px;
+    display: flex;
+    gap: 20px;
+    align-items: center;
+}
+
+.nav__button {
+    appearance: none;
+    background-color: transparent;
+    color: #ebebeb;
+    margin: 0;
+    text-align: left;
+    border: none;
+    height: 13px;
+    -webkit-appearance: none;
+    padding: 0;
+
+    cursor: pointer;
+}
+
+.language__container {
+    border-bottom: 1px solid transparent;
+
+
+}
+
+.language__container_active {
+    box-sizing: border-box;
+    height: 20px;
+    border-bottom: 1px solid #EBEBEB;
+}
+
+.nav__button_active {
+    border-bottom: 1px solid #EBEBEB;
+}
+.nav__title {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    /* identical to box height, or 24px */
+    color: #FFFFFF;
+    margin: 0;
+    text-decoration: none;
+}
+
+.nav__line {
+    background-color: #454545;
+    width: 100%;
+    height: 1px;
+    margin-bottom: 40px;
+}
+
+.nav__title_container {
+    display: flex;
+    gap: 24px;
+
+}
+
+.icon_chevron {
+    width: 20px;
+}
+
+.nav__buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 50px;
+}
@@ -0,0 +1,185 @@
+import './navigation.css'
+import '../header/header.css'
+import "../../styles/styles.css"
+import write from '../footer/send.svg'
+import phone from '../footer/phone.svg'
+import iconButton from "../../styles/iconButton.svg"
+import { AnimatePresence, motion } from "framer-motion";
+import chevron from '../header/chevronIcon.svg'
+type THeader = {
+    menuOpen?: boolean,
+    language: string,
+    setOpen?: (value: boolean) => void
+    changeLanguage: (language: string) => void;
+    setOpacity?: (value: boolean) => void;
+    text?: any;
+
+}
+
+const container = {
+    hidden: {
+        translateX: '100%',
+        transition: { duration: 0.2, ease: 'easeOut' }
+    },
+    show: {
+        translateX: '0%',
+        transition: { duration: 0.2, ease: 'easeIn' },
+    },
+    exit: {
+        translateX: '0%',
+        transition: { duration: 0.2, ease: 'easeOut' }
+    }
+}
+
+const staggeredVariants = {
+    hidden: {
+        transition: {
+        }
+    },
+    show: {
+        transition: {
+            staggerChildren: 0.35,
+            staggerDirection: -1,
+
+        }
+    },
+
+    exit: {
+        transition: {
+        }
+    }
+}
+
+const items = {
+    hidden: {
+        opacity: 0,
+    },
+    show: {
+        opacity: 1,
+        transition: { ease: 'easeIn' },
+
+    },
+
+    exit: {
+        opacity: 1,
+    }
+}
+
+export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, text }) => {
+
+    const userLanguage = language === 'RU';
+
+    const { cardLarge, cardLarge1, cardSmall, cardSmall1 } = text
+
+    const langArray = [{
+        value: 'ru-RU',
+        name: 'RU'
+    },
+    {
+        value: 'en-EN',
+        name: 'EN'
+    }]
+
+
+    function langActive(lang: string, language: string) {
+        if (lang === language) {
+            return 'language__container_active'
+        }
+
+        else {
+            return 'language__container'
+        }
+    }
+
+    return (
+        <AnimatePresence>
+            {menuOpen && (
+                <motion.nav
+                    variants={container}
+                    initial={'hidden'}
+                    animate={'show'}
+                    exit={'hidden'}
+                    className={`navigation`}>
+                    <motion.div
+                        variants={staggeredVariants}
+                        initial={'hidden'}
+                        animate={'show'}
+                        exit={'exit'}
+                        className='nav__buttons'>
+                        <motion.div
+                            variants={items}
+                            className='nav__header'>
+                            <div className='button__nav_container'>
+                                {langArray.map((lang, i) => (
+                                    <div className={langActive(lang.name, language)}>
+                                        <button value={lang.value} key={i} onClick={() => changeLanguage(lang.name)} className='nav__button'>{lang.name}</button>
+                                    </div>
+                                ))}
+                            </div>
+                            <div className='nav__title_container'>
+                                <a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/' : 'http://en.graff.tech/'} className='nav__title'>{text.captionCompain}</a>
+                                <img alt='icon' className='icon_chevron' src={chevron}></img>
+                            </div>
+                            <span className='nav__line'></span>
+                        </motion.div>
+
+                        <motion.a
+                            href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}
+                            variants={items}
+                            className='footer__card_2'>
+                            <div className='ellipse__container'>
+                                <div className="main-block__icon_container">
+                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
+                                </div>
+                            </div>
+                            <div className={'card__write'}>
+                                <img alt='icon' src={write} className='card__icon'></img>
+                                <p className='card__caption'>{cardSmall.caption}</p>
+                            </div>
+                        </motion.a>
+                        <motion.a
+                            href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}
+                            variants={items}
+                            className='footer__card_2'>
+                            <div className='ellipse__container'>
+                                <div className="main-block__icon_container">
+                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
+                                </div>
+                            </div>
+                            <div className='card__write'>
+                                <img alt='icon' src={phone} className='card__icon'></img>
+                                <p className='card__caption'>{cardSmall1.caption}</p>
+                            </div>
+                        </motion.a>
+                        <motion.div
+                            variants={items}
+                            className={'footer__card_l'}>
+                            <div className='card__contacts'>
+                                <p className='card__email'>info@graff.tech</p>
+                                <p className='card__tel'>+7 800 770 00 76</p>
+                            </div>
+                            <div className='card__adress'>
+                                <p className='card__street'>{cardLarge.address}</p>
+                                <p className='card_city'>{cardLarge.city}</p>
+                            </div>
+                            <p className='card_country'>{cardLarge.country}</p>
+                        </motion.div>
+                        <motion.div
+                            variants={items}
+                            className='footer__card_l'>
+                            <div className='card__contacts'>
+                                <p className='card__email'>waseem@graff.tech</p>
+                                <p className='card__tel'>+971 50 938 8902</p>
+                            </div>
+                            <div className='card__adress card__adress_uae'>
+                                <p className='card_city'>{cardLarge1.address}</p>
+                            </div>
+                            <p className='card_country'>{cardLarge1.country}</p>
+                        </motion.div>
+                    </motion.div>
+                </motion.nav>
+            )}
+        </AnimatePresence>
+
+    )
+} 
@@ -0,0 +1,46 @@
+import './sharePopup.css'
+import { useState, useEffect } from 'react'
+import { TSidebarPopup } from '../../utils/types'
+
+export const PopupShare: React.FC<any> = ({ setClose, data }) => {
+    const [copy, setCopy] = useState(false)
+
+    console.log(data)
+
+    function copyLink() {
+        navigator.clipboard.writeText(window.location.href)
+        setCopy(prev => !prev)
+    }
+
+    function closePopup() {
+        setClose()
+        setCopy(false)
+    }
+
+    useEffect(() => () => setCopy(false), []);
+
+
+    return (
+        <div className='share-popup-container'>
+            <div className='mobile-users-part-header share-header-popup'>
+                <span className='mobile-users-part-header-title'>Пригласить на демонстрацию</span>
+                <button onClick={closePopup} className='mobile-users-part-header-close-button'></button>
+            </div>
+            <div className='share-popup-data-container'>
+                <span className='share-popup-data-title'>Код подключения</span>
+                <input className='share-popup-data-input share-popup-data-input code' value={data.connection_code} readOnly></input>
+            </div>
+            <div className='border-line'></div>
+            <div className='share-popup-data-container'>
+                <span className='share-popup-data-title'>Ссылка для подключения</span>
+                <input className='share-popup-data-input href' value={window.location.href} readOnly></input>
+            </div>
+            <div className='share-popup-data-container'>
+                <button className='share-popup-copy-button '>
+                    <span className='share-popup-copy-button-icon'></span>
+                    <span onClick={copyLink} className='share-popup-copy-button-title'>{copy ? 'Скопировано' : 'Скопировать'}</span>
+                </button>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8.22609C8 6.99665 9.02335 6 10.2857 6H15.7143C16.9767 6 18 6.99665 18 8.22609V17.7739C18 19.0033 16.9767 20 15.7143 20H10.2857C9.02335 20 8 19.0033 8 17.7739V8.22609Z" stroke="white" stroke-linecap="round"/>
+<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="white" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,142 @@
+.share-popup-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 494px;
+    height: 469px;
+    box-sizing: border-box;
+    border: 1px solid #4F4F4F;
+    border-radius: 32px;
+    top: calc(50% - 469px / 2);
+    left: calc(50% - 494px / 2);
+    background-color: #333333;
+    color: #FFFFFF;
+    padding: 48px;
+    /* gap: 24px; */
+    justify-content: space-between;
+}
+
+.share-header-popup {
+    padding-bottom: 0px;
+}
+
+.border-line {
+    width: 80%;
+    height: 1px;
+    background-color: #404040;
+}
+
+.share-popup-data-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.share-popup-data-title {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+    user-select: none;
+}
+
+.share-popup-data-input {
+    background-color: #4F4F4F;
+    outline: none;
+    width: 100%;
+    border: none;
+    border-radius: 12px;
+    color: #FFFFFF;
+    box-sizing: border-box;
+}
+
+.mobile-users-part-header-title {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    font-weight: 400;
+    font-size: 22px;
+    line-height: 130%;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.mobile-users-part-header-close-button {
+    width: 15px;
+    height: 15px;
+    border: none;
+    background-color: transparent;
+    background: url(../../images/icons/close.svg) 50% 50% no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+}
+
+.share-popup-data-input.code {
+    height: 76px;    
+    font-weight: 300;
+    font-size: 38px;
+    line-height: 46px;
+    letter-spacing: 0.3em;
+    text-align: center;
+    padding: 15px 0;
+}
+
+.share-popup-data-input.href {
+    height: 48px;
+    padding: 14.5px 16px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+.share-popup-copy-button {
+    display: flex;
+    box-sizing: border-box;
+    width: 176px;
+    height: 48px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    background-color: #567ECE;
+    border: none;
+    color: #FFFFFF;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    gap: 4px;
+    cursor: pointer;
+    transition: .3s;
+}
+
+.share-popup-copy-button:hover {
+    opacity: .7;
+}
+
+.share-popup-copy-button.copied {
+    background-color: #219653;
+    transition: .3s;
+}
+
+.share-popup-copy-button-icon {
+    width: 24px;
+    height: 24px;
+    background: url('copyIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
+.show-share-popup-enter {
+    opacity: 0;
+}
+
+.show-share-popup-enter-active {
+    opacity: 1;
+    transition: .3s;
+}
+
+.show-share-popup-exit {
+    opacity: 1;
+}
+
+.show-share-popup-exit-active {
+    opacity: 0;
+    transition: .3s;
+}
@@ -0,0 +1,10 @@
+import { Route, Redirect } from "react-router-dom";
+
+export const ProtectedComponent:React.FC<any> = ({component:Component, ...props}) => {
+  console.log(props)
+    return (
+        <Route>
+        {() => (props.connected ? <Component {...props} /> : <Redirect to="/" />)}
+      </Route>
+      )
+}
@@ -0,0 +1,4 @@
+
+export const UserList: React.FC<any> = ({ selected, setSelected }) => {
+  return <></>;
+};
@@ -0,0 +1,33 @@
+import "../../styles/styles.css"
+import './demonstration.css'
+
+import building from './building.png'
+
+import iconButton from "./iconButton.svg"
+
+
+export const Demostration: React.FC<any> = ({text}) => {
+    const { card } = text;
+    return (
+        <div className="block">
+            <a href='https://stream.graff.tech/' target='_blank' rel="noreferrer" className='demos_container demos__route'>
+                <div className="main-block__icon_container demo__icon">
+                    <img alt="icon" src={iconButton} className="main-block__icon"></img>
+                </div>
+                <div className='demo'>
+                <img alt='buildingImg' src={building} className='demo_image'></img>
+                <div className='demo_info'>
+                    <div className='title__block'>
+                        <h4 className='title__demo'>{card.title}</h4>
+                        <p className='caption'>{card.subTitle}</p>
+                    </div>
+                    <div className='body__block'>
+                        <p className='caption1'>{card.caption}</p>
+                        <p className='caption2'>{card.caption1}</p>
+                    </div>
+                </div>
+            </div>
+            </a>
+        </div>
+    )
+}
@@ -0,0 +1,152 @@
+.demonstration__title {
+    margin: 0 0 44px 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 100%;
+    /* or 40px */
+    color: #FFFFFF;
+}
+
+.demos-card__container {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+
+}
+
+.demo__icon {
+    right: 36px;
+    top: 36px;
+
+}
+
+.demo-card__header {
+    position: relative;
+}
+
+.demos-card {
+    background: #1E1E1E;
+    border-radius: 24px;
+    width: 384px;
+}
+
+.block {
+    margin-top: 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.demo-card__image {
+    width: 100%;
+    height: 300px;
+    border-radius: 24px;
+
+}
+
+.demo-card__info {
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.demo-card__icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 16px;
+}
+
+.demo-card__title {
+    font-weight: 400;
+    font-size: 22px;
+    line-height: 130%;
+    color: #EBEBEB;
+    margin: 0 0 5px 0;
+}
+
+.demo-card__subtitle {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 130%;
+    /* or 18px */
+
+
+    /* Landing/White */
+
+    color: #EBEBEB;
+
+    opacity: 0.5;
+
+}
+
+.demo-card__text {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 130%;
+    /* or 21px */
+
+
+    /* Landing/White */
+    margin: 0 0 10px 0;
+    color: #EBEBEB;
+}
+
+.demo-card__subtext {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 130%;
+    /* or 18px */
+    /* Landing/White */
+    color: #EBEBEB;
+    opacity: 0.5;
+
+}
+
+.demos-card {
+    cursor: pointer;
+}
+
+
+.demos-card:hover>div>div>div>img {
+    transition: opacity ease-out 0.2s;
+    opacity: 1;
+}
+
+.demos__route {
+    width: 100%;
+}
+
+
+@media screen and (max-width: 1024px) {
+    .block {
+        padding: 0 20px 80px;
+    }
+
+    .demos-card__container {
+        flex-direction: column;
+    }
+
+    .demos-card {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+    }
+
+    .demo-card__image {
+        width: 200px;
+        height: auto;
+    }
+}
+
+
+@media screen and (max-width: 639px) {
+    .demo__icon {
+        right: 19px;
+        top: 186px;
+
+    }
+}
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
+</svg>
@@ -0,0 +1,261 @@
+.demo__container_mobile {
+  padding: 0;
+}
+
+.demos_container {
+  font-family: "Inter";
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  border-radius: 16px;
+  position: relative;
+  text-decoration: none;
+}
+
+.demo__container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 24px;
+}
+
+
+.demo {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 581px;
+}
+
+.demo_image {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
+  border-radius: 16px;
+  object-fit: cover;
+  width: 100%;
+  height: 300px;
+}
+
+.demo_info {
+  box-sizing: border-box;
+  position: relative;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.title__demo {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 22px;
+  line-height: 100%;
+  /* identical to box height, or 24px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+}
+
+.caption {
+  margin: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 120%;
+  /* identical to box height, or 17px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+
+  opacity: 0.5;
+}
+
+
+.caption1 {
+  margin: 0 0 10px 0;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 130%;
+
+  /* or 25px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+}
+
+.caption2 {
+  margin: 0;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  /* or 20px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+
+  opacity: 0.5;
+}
+
+.width {
+  align-items: flex-end;
+}
+
+.title__block {
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+}
+
+.title__demo {
+  margin: 0;
+}
+
+.demo__icon {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  right: 32px;
+  top: 58%;
+}
+
+
+.demos_container:hover > div > img {
+  transition: opacity ease-out 0.2s;
+  opacity: 1;
+}
+
+.demos__list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media screen and (min-width: 1600px) {
+  .demo__icon {
+    top: 57%;
+  }
+
+  .title__demo {
+    font-size: 26px;
+  }
+
+  .caption {
+    font-size: 16px;
+  }
+
+  .caption1 {
+    font-size: 20px;
+  }
+
+  .caption2 {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 1279px) {
+  .demo__icon {
+    top: 334px;
+    top: 234px;
+    right: 24px;
+  }
+
+  .demos__tittle {
+    font-size: 40px;
+  }
+
+  .demo_image {
+    height: 210px;
+  }
+
+  .demo__container {
+    gap: 20px;
+  }
+
+  .demo_info {
+    padding: 32px;
+  }
+
+  .title__demo {
+    font-size: 16px;
+  }
+
+  .caption {
+    font-size: 12px;
+  }
+
+  .caption1 {
+    font-size: 13px;
+  }
+
+  .caption2 {
+    font-size: 11px;
+  }
+
+  .demo_info {
+    gap: 12px;
+    padding: 24px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .title__demo {
+    font-size: 1.5vw;
+  }
+
+  .caption {
+    font-size: 1.2vw;
+  }
+
+  .caption1 {
+    font-size: 1.3vw;
+  }
+
+  .caption2 {
+    font-size: 1.1vw;
+  }
+}
+
+@media screen and (max-width: 639px) {
+  .demo__container {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .demo__icon {
+    right: 16px;
+    top: 228px;
+  }
+
+  .title__demo {
+    font-size: 3.5vw;
+  }
+
+  .caption {
+    font-size: 2.9vw;
+  }
+
+  .caption1 {
+    font-size: 3.2vw;
+  }
+
+  .caption2 {
+    font-size: 2.9vw;
+  }
+
+  .demo_info {
+    padding: 16px;
+  }
+
+  .demos__tittle {
+    font-size: 28px;
+    width: 300px;
+
+  }
+}
@@ -0,0 +1,37 @@
+import "./demos.css";
+import "../../styles/styles.css";
+import building1 from "./building1.png";
+import iconButton from "./iconButton.svg";
+import { Link } from "react-router-dom";
+
+export const Demos: React.FC<any> = ({ item, onClick }) => {
+  console.log(item)
+  return (
+    <div onClick={() => onClick()} className="main-block__container">
+      <div className="demos_container">
+        <div className="main-block__icon_container demo__icon">
+          <img alt="icon" src={iconButton} className="main-block__icon"></img>
+        </div>
+        <div className="demo">
+          <img
+            alt="buildingImg"
+            src={item.image.preview}
+            className="demo_image"
+          ></img>
+          <div className="demo_info">
+            <div className="title__block">
+              <h4 className="title__demo">{item.title_full.ru}</h4>
+              <p className="caption">{item.location.ru}</p>
+            </div>
+            <div className="body__block">
+              <div className="description__container">
+                <p className="caption1">{item.description.ru}</p>
+                {item.description_second ? <p className="caption">{item.description_second.ru}</p> : <></>}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
+</svg>
@@ -0,0 +1,469 @@
+.footer__container {
+    box-sizing: border-box;
+    background-color: transparent;
+    background: #141414;
+    border-radius: 32px 32px 0px 0px;
+    color: #EBEBEB;
+    display: flex;
+    justify-content: center
+}
+
+.link {
+    color: #EBEBEB;
+
+}
+
+.footer__main-block {
+    width: 1200px;
+    display: flex;
+    padding: 120px 120px;
+    gap: 186px;
+    justify-content: space-between;
+}
+
+.footer__block_copyright_mobile_margin {
+    margin-top: 0;
+}
+
+.footer__column_mobile {
+    display: none;
+}
+
+.footer__block_1 {
+    display: flex;
+    flex-direction: column;
+    gap: 70px;
+}
+
+.footer__name {
+    margin: 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 100%;
+}
+
+.footer__name_color {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 100%;
+    margin: 0;
+    background-image: linear-gradient(to right, #D375FF 0%, #798FFF 45%);
+    background-size: 100%;
+    background-repeat: repeat;
+    background-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.footer__block_contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.contacts__title {
+    margin: 0;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 120%;
+    /* identical to box height, or 17px */
+
+
+    /* Landing/White */
+
+
+    opacity: 0.5;
+
+}
+
+.footer__container_social {
+    display: grid;
+    grid-template-columns: 74px 74px;
+    gap: 16px;
+    grid-row-gap: 8px;
+}
+
+.footer__social {
+    color: #EBEBEB;
+    margin: 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 125%;
+    text-decoration: none;
+}
+
+.footer__block_copyright {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 29px;
+}
+
+.footer__logo {
+    width: 50px;
+    height: 80px;
+}
+
+.copyright__caption {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 120%;
+    justify-content: flex-end
+}
+
+.copyright {
+    margin: 0;
+    color: #EBEBEB;
+    text-decoration: none;
+}
+
+.footer__block_2 {
+    display: grid;
+    grid-template-columns: 380px 380px;
+    gap: 30px;
+}
+
+.footer__card_l {
+    background: #1E1E1E;
+    border-radius: 16px;
+    padding: 32px;
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+    box-sizing: border-box;
+}
+
+.footer__card_2 {
+    box-sizing: border-box;
+    cursor: pointer;
+    padding: 32px;
+    position: relative;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 140%;
+    /* or 25px */
+    text-decoration: none;
+
+
+    /* Gray */
+
+    color: #E3DDE5;
+    border: 1px solid #454545;
+    border-radius: 16px;
+
+}
+
+.card__contacts {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 140%;
+    /* or 25px */
+
+
+    /* Landing/White */
+
+    color: #EBEBEB;
+}
+
+.card__email {
+    margin: 0 0 8px 0
+}
+
+.card__tel {
+    margin: 0;
+}
+
+.card__adress {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 140%;
+    /* or 25px */
+    /* Landing/White */
+    color: #EBEBEB;
+    opacity: 0.5;
+}
+
+.card__street {
+    margin: 0;
+}
+
+.card_city {
+    margin: 0;
+}
+
+.card_country {
+    margin: 0;
+}
+
+
+.card__icon {
+    margin-bottom: 15px;
+    width: 24px;
+}
+
+.card__caption {
+    margin: 0;
+
+}
+
+.card__adress_uae {
+    margin-bottom: 25px;
+}
+
+.ellipse__container {
+    position: absolute;
+    right: 32px;
+    bottom: 33px;
+}
+
+.footer__card_2:hover {
+    border: 1px solid #E3DDE5;
+    transition: border ease-out 0.2s;
+}
+
+.footer__card_2:hover>div>div>img {
+    transition: opacity ease-out 0.2s;
+    opacity: 1;
+
+
+}
+
+@media screen and (min-width: 1600px) {
+    .footer__container {
+        padding: 144px 0;
+        margin: 0 auto;
+
+    }
+
+    .footer__main-block {
+        width: 1600px;
+        gap: 0;
+
+    }
+
+    .footer__block_1 {
+        gap: 84px;
+    }
+
+    .footer__name {
+        font-weight: 400;
+        font-size: 48px;
+        line-height: 100%;
+    }
+
+    .footer__name_color {
+        font-weight: 400;
+        font-size: 48px;
+        line-height: 100%;
+    }
+
+    .footer__block_contacts {
+        gap: 25px;
+    }
+
+    .contacts__title {
+        font-weight: 600;
+        font-size: 17px;
+        line-height: 120%;
+    }
+
+    .footer__container_social {
+        gap: 25px;
+        grid-template-columns: 94px 94px;
+    }
+
+    .footer__social {
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 125%;
+    }
+
+    .footer__logo {
+        width: 60px;
+        height: 96px;
+    }
+
+    .footer__block_copyright {
+        gap: 35px;
+    }
+
+    .copyright__caption {
+        gap: 20px;
+        font-weight: 600;
+        font-size: 17px;
+        line-height: 120%;
+
+    }
+
+    .footer__block_2 {
+        gap: 35px;
+        grid-template-columns: 456px 456px
+    }
+
+    .footer__card_l {
+        padding: 40px;
+        gap: 30px;
+        margin-bottom: 36px;
+    }
+
+    .card__contacts {
+        font-weight: 400;
+        font-size: 22px;
+        line-height: 140%;
+    }
+
+    .card__adress {
+        font-weight: 400;
+        font-size: 21.6px;
+        line-height: 140%;
+    }
+
+    .footer__card_2 {
+        padding: 40px 36px;
+    }
+
+    .card__write {
+        font-weight: 400;
+        font-size: 22px;
+        line-height: 140%;
+    }
+
+    .card__icon {
+        width: 28px;
+        margin-bottom: 17px;
+    }
+
+    .card__adress_uae {
+        margin-bottom: 30px;
+    }
+}
+
+
+@media screen and (max-width: 1279px) {
+    .footer__block_2 {
+        grid-template-columns: 311px 311px;
+    }
+
+
+    .footer__container {
+        padding: 120px 12px;
+        gap: 124px;
+    }
+
+}
+
+.footer__block_copyright_mobile {
+    display: none;
+    grid-template-columns: auto 1fr;
+    gap: 29px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 150%;
+    /* identical to box height, or 21px */
+
+    letter-spacing: 0.02em;
+
+
+
+}
+
+@media screen and (max-width: 1060px) {
+
+    .footer__main-block {
+        display: flex;
+        flex-direction: column;
+        gap: 53px;
+        width: 100%;
+        padding: 0;
+    }
+    
+
+
+    .footer__block_copyright {
+        display: none;
+    }
+
+    .footer__block_1 {
+        display: flex;
+        flex-direction: row;
+        gap: 121px;
+    }
+
+    .footer__block_2 {
+        grid-template-columns: 1fr 1fr
+    }
+
+    .footer__card_l {
+        margin-bottom: 20px;
+    }
+
+    .footer__block_copyright_mobile {
+        display: grid;
+    }
+}
+
+
+@media screen and (max-width: 639px) {
+
+
+    .footer__main-block {
+        padding: 60px 10px;
+        gap: 42px;
+
+
+    }
+
+    .footer__block_1 {
+        flex-direction: column;
+        gap: 30px;
+    }
+
+    .footer__block_copyright {
+        display: none;
+    }
+
+    .footer__block_2 {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .footer__col2_mobile {
+        display: none;
+    }
+
+    .footer__col1_mobile {
+        display: none;
+    }
+
+    .footer__column_mobile {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .footer__card_l {
+        margin-bottom: 0;
+    }
+
+    .footer__block_contacts {
+        gap: 16px;
+    }
+
+    .footer__block_copyright_mobile {
+        display: flex;
+    }
+
+
+}
@@ -0,0 +1,156 @@
+import './footer.css'
+import logo from './logo.svg'
+import write from './send.svg'
+import phone from './phone.svg'
+import iconButton from "../../styles/iconButton.svg"
+import "../../styles/styles.css"
+
+
+export const Footer: React.FC<any> = ({ text, language }) => {
+    const userLanguage = language === 'RU';
+    const { cardLarge, cardLarge1, cardSmall, cardSmall1, copyright } = text
+
+    return (
+        <div className="footer__container">
+            <div className='footer__main-block'>
+                <div className='footer__block_1'>
+                    <div className='footer__block_name'>
+                        <p className='footer__name'>Graff.estate</p>
+                        <p className='footer__name_color'>stream.</p>
+                    </div>
+                    <div className='footer__block_contacts'>
+                        <p className='contacts__title'>{text.social}</p>
+                        <div className='footer__container_social'>
+                            <a href='https://www.facebook.com/GRAFFinteractive' target='_blank' rel="noreferrer" className='footer__social'>Facebook</a>
+                            <a href='https://www.instagram.com/graffinteractive/' target='_blank' rel="noreferrer" className='footer__social'>Instagram</a>
+                            <a href='https://www.youtube.com/channel/UCveYBNLVeGxgsDsfhrVxNoA' target='_blank' rel="noreferrer" className='footer__social'>YouTube</a>
+                            <a href='https://vk.com/graffinteractive' target='_blank' rel="noreferrer" className='footer__social'>VK</a>
+                        </div>
+                    </div>
+                    <div className='footer__block_copyright'>
+                        <img alt='logo' src={logo} className='footer__logo'></img>
+                        <div className='copyright__caption'>
+                            <p className='copyright'>{copyright.caption}</p>
+                            <p className='copyright'>
+                                {copyright.caption1}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div className='footer__block_2'>
+                    <div className='footer__col1 footer__col1_mobile'>
+                        <div className='footer__card_l'>
+                            <div className='card__contacts'>
+                                <p className='card__email'>info@graff.tech</p>
+                                <p className='card__tel'>+7 800 770 00 76</p>
+                            </div>
+                            <div className='card__adress'>
+                                <p className='card__street'>{cardLarge.address}</p>
+                                <p className='card_city'>{cardLarge.city}</p>
+                            </div>
+                            <p className='card_country'>{cardLarge.country}</p>
+                        </div>
+                        <div className='footer__card_2'>
+                            <a className='link' href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}>
+                                <div className='ellipse__container'>
+                                    <div className="main-block__icon_container">
+                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
+                                    </div>
+                                </div>
+                                <div className='card__write'>
+                                    <img alt='icon' src={write} className='card__icon'></img>
+                                    <p className='card__caption'>{cardSmall.caption}</p>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                    <div className='footer__col2 footer__col2_mobile'>
+                        <div className='footer__card_l'>
+                            <div className='card__contacts'>
+                                <p className='card__email'>waseem@graff.tech</p>
+                                <p className='card__tel'>+971 50 938 8902</p>
+                            </div>
+                            <div className='card__adress card__adress_uae'>
+                                <p className='card_city'>{cardLarge1.address}</p>
+                            </div>
+                            <p className='card_country'>{cardLarge1.country}</p>
+                        </div>
+                        <div className='footer__card_2'>
+                            <a className='link' href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}>
+                                <div className='ellipse__container'>
+                                    <div className="main-block__icon_container">
+                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
+                                    </div>
+                                </div>
+                                <div className='card__write'>
+                                    <img alt='icon' src={phone} className='card__icon'></img>
+                                    <p className='card__caption'>{cardSmall1.caption}</p>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                    <div className='footer__column_mobile'>
+                        <a className='link' href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}>
+                            <div className='footer__card_2'>
+                                <div className='ellipse__container'>
+                                    <div className="main-block__icon_container">
+                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
+                                    </div>
+                                </div>
+
+                                <div className='card__write'>
+                                    <img alt='icon' src={write} className='card__icon'></img>
+                                    <p className='card__caption'>{cardSmall.caption}</p>
+                                </div>
+                            </div>
+                        </a>
+                        <div className='footer__card_2'>
+                            <a className='link' href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}>
+                                <div className='ellipse__container'>
+                                    <div className="main-block__icon_container">
+                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
+                                    </div>
+                                </div>
+                                <div className='card__write'>
+                                    <img alt='icon' src={phone} className='card__icon'></img>
+                                    <p className='card__caption'>{cardSmall1.caption}</p>
+                                </div>
+                            </a>
+                        </div>
+                        <div className='footer__card_l'>
+                            <div className='card__contacts'>
+                                <p className='card__email'>info@graff.tech</p>
+                                <p className='card__tel'>+7 800 770 00 76</p>
+                            </div>
+                            <div className='card__adress'>
+                                <p className='card__street'>{cardLarge.address}</p>
+                                <p className='card_city'>{cardLarge.city}</p>
+                            </div>
+                            <p className='card_country'>{cardLarge.country}</p>
+                        </div>
+                        <div className='footer__card_l'>
+                            <div className='card__contacts'>
+                                <p className='card__email'>waseem@graff.tech</p>
+                                <p className='card__tel'>+971 50 938 8902</p>
+                            </div>
+                            <div className='card__adress card__adress_uae'>
+                                <p className='card_city'>{cardLarge1.address}</p>
+                            </div>
+                            <p className='card_country'>{cardLarge1.country}</p>
+                        </div>
+                    </div>
+
+                </div>
+                <div className='footer__block_copyright_mobile'>
+                    <img alt='logo' src={logo} className='footer__logo'></img>
+                    <div className='copyright__caption'>
+                        <a href={userLanguage ? 'https://graff.tech/privacypolicy' : 'http://en.graff.tech/privacypolicyeng'} target="_blank" rel="noreferrer" className='copyright'>{copyright.caption}</a>
+                        <p className='copyright'>
+                            {copyright.caption1}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.35197 1.24631L4.70501 0.892249L4.70501 0.892249L4.35197 1.24631ZM6.19317 3.08221L5.84013 3.43627V3.43627L6.19317 3.08221ZM14.753 12.8453L15.106 13.1994L14.753 12.8453ZM13.2256 14.3683L12.8725 14.0143H12.8725L13.2256 14.3683ZM6.19357 4.27111L5.84052 3.91705L5.84052 3.91705L6.19357 4.27111ZM4.80615 5.65452L4.45311 5.30046V5.30046L4.80615 5.65452ZM4.69991 5.98765L4.22892 6.15547L4.22892 6.15547L4.69991 5.98765ZM7.11658 8.92297L6.76614 9.27961L7.11658 8.92297ZM10.0156 11.3056L9.83125 11.7703L10.0156 11.3056ZM3.99893 1.60037L5.84013 3.43627L6.54621 2.72814L4.70501 0.892249L3.99893 1.60037ZM1.98489 3.12336L3.51228 1.60037L2.80619 0.892249L1.27881 2.41524L1.98489 3.12336ZM12.5587 10.1742L14.3999 12.0101L15.106 11.302L13.2648 9.46608L12.5587 10.1742ZM14.3999 12.4913L12.8725 14.0143L13.5786 14.7224L15.106 13.1994L14.3999 12.4913ZM12.8725 14.0143C12.5226 14.3632 12.0371 14.5211 11.4116 14.4978C10.7782 14.4742 10.0382 14.2638 9.25636 13.9156C7.69345 13.2196 6.08394 12.0275 5.04247 10.9891L4.33639 11.6972C5.45018 12.8078 7.15837 14.076 8.84954 14.8291C9.69469 15.2055 10.5658 15.4669 11.3744 15.4971C12.1909 15.5275 12.9782 15.3211 13.5786 14.7224L12.8725 14.0143ZM5.04247 10.9891C3.99515 9.94476 2.7937 8.32467 2.09128 6.75226C1.73987 5.9656 1.52718 5.22127 1.50243 4.58506C1.47798 3.95667 1.63604 3.47121 1.98489 3.12336L1.27881 2.41524C0.677284 3.01503 0.471318 3.80487 0.503182 4.62394C0.534743 5.4352 0.798696 6.31049 1.17824 7.16013C1.93774 8.86031 3.21546 10.5795 4.33639 11.6972L5.04247 10.9891ZM5.84052 3.91705L4.45311 5.30046L5.1592 6.00859L6.54661 4.62517L5.84052 3.91705ZM10.6737 11.5685L12.0721 10.1742L11.366 9.46608L9.96761 10.8604L10.6737 11.5685ZM4.22892 6.15547C4.387 6.59912 4.9329 7.47821 6.76614 9.27961L7.46702 8.56633C5.639 6.77006 5.24549 6.02913 5.17091 5.81983L4.22892 6.15547ZM6.76614 9.27961C8.58843 11.0703 9.4247 11.609 9.83125 11.7703L10.2 10.8408C10.0011 10.7619 9.2917 10.3593 7.46702 8.56633L6.76614 9.27961ZM9.96761 10.8604C9.96175 10.8663 9.97601 10.8492 10.016 10.8354C10.065 10.8187 10.1336 10.8145 10.2 10.8408L9.83125 11.7703C10.213 11.9218 10.5261 11.7157 10.6737 11.5685L9.96761 10.8604ZM13.2648 9.46608C12.7403 8.94308 11.8905 8.94308 11.366 9.46608L12.0721 10.1742C12.2063 10.0404 12.4245 10.0404 12.5587 10.1742L13.2648 9.46608ZM14.3999 12.0101C14.5334 12.1432 14.5334 12.3582 14.3999 12.4913L15.106 13.1994C15.6313 12.6756 15.6313 11.8258 15.106 11.302L14.3999 12.0101ZM4.45311 5.30046C4.3008 5.45233 4.09017 5.76605 4.22892 6.15547L5.17091 5.81983C5.18043 5.84655 5.18554 5.87678 5.18485 5.90779C5.18418 5.9381 5.17813 5.96281 5.1718 5.98024C5.1603 6.01191 5.14826 6.01949 5.1592 6.00859L4.45311 5.30046ZM4.70501 0.892249C4.1805 0.36925 3.3307 0.369251 2.80619 0.892249L3.51228 1.60037C3.6465 1.46654 3.86471 1.46654 3.99893 1.60038L4.70501 0.892249ZM5.84013 3.43627C5.97386 3.56961 5.97364 3.78432 5.84052 3.91705L6.54661 4.62517C7.07222 4.10107 7.07121 3.25163 6.54621 2.72814L5.84013 3.43627Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1L14.4743 1.15811C14.537 0.970175 14.4828 0.762974 14.3361 0.62981C14.1894 0.496646 13.978 0.462636 13.7969 0.543094L14 1ZM7 10.3333L6.55279 10.5569L7 10.3333ZM0.84528 7.43354L0.724012 7.91861L0.84528 7.43354ZM9.56237 14.3129L9.08803 14.1548L9.56237 14.3129ZM9.00943 14.3522L8.56222 14.5758L9.00943 14.3522ZM10.0367 14.471L14.4743 1.15811L13.5257 0.841886L9.08803 14.1548L10.0367 14.471ZM13.7969 0.543094L0.593131 6.41145L0.999269 7.32526L14.2031 1.45691L13.7969 0.543094ZM0.724012 7.91861L6.10095 9.26285L6.34349 8.29271L0.966548 6.94847L0.724012 7.91861ZM6.57578 9.13133L14.3536 1.35355L13.6464 0.646447L5.86867 8.42422L6.57578 9.13133ZM5.77501 9.00138L6.55279 10.5569L7.44721 10.1097L6.66944 8.55417L5.77501 9.00138ZM6.55279 10.5569L8.56222 14.5758L9.45665 14.1286L7.44721 10.1097L6.55279 10.5569ZM0.593131 6.41145C-0.102145 6.72046 -0.0141284 7.73408 0.724012 7.91861L0.966548 6.94847C1.15109 6.99461 1.17309 7.24801 0.999269 7.32526L0.593131 6.41145ZM9.08803 14.1548C9.14437 13.9858 9.37696 13.9692 9.45665 14.1286L8.56222 14.5758C8.88096 15.2133 9.81133 15.1472 10.0367 14.471L9.08803 14.1548Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.0001 12.6666L10.6667 8L6.0001 3.33334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,233 @@
+
+.header-container {
+  display: flex;
+  padding: 30px 40px;
+  color: #ffffff;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.header__buttons_wrapper {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+}
+
+.burger__button {
+  display: none;
+}
+
+.header-logo {
+  width: 31px;
+  height: 50px;
+  
+}
+
+.header-buttons {
+  margin-right: 96px;
+}
+
+.header-button {
+  font-family: "GilroyWebRegular";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 125%;
+  background-color: transparent;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 0px;
+  appearance: none;
+  text-decoration: none;
+}
+
+.header-lang-button-text:hover {
+  background: rgba(235, 235, 235, 0.2);
+
+}
+
+.wrapper__button {
+  margin: 0;
+}
+
+
+
+.header-lang-button {
+  position: absolute;
+  right: 40px;
+  top: 40px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 55px;
+  padding: 6px 8px 5px 12px;
+  box-sizing: border-box;
+  height: 29px;
+  justify-content: space-between;
+  box-sizing: border-box;
+  line-height: 13px;
+  background-color: transparent;
+  border: 2px solid #ebebeb;
+  border-radius: 12px;
+  transition: height ease-in 0.5s;
+
+
+}
+
+.header-lang-button_disabled {
+  height: 29px;
+}
+
+.header-lang-button_active {
+  height: 51px;
+}
+
+.header-lang-button_active {
+  border-radius: 12px;
+}
+
+.header-lang-button-text {
+
+  width: 100%;
+  appearance: none;
+  background-color: transparent;
+  color: #ebebeb;
+  padding: 0;
+  text-align: left;
+  margin: 0;
+  border: none;
+  height: 13px;
+  -webkit-appearance: none;
+
+  cursor: pointer;
+}
+
+.header-lang-button-picked {
+  cursor: pointer;
+}
+
+.header-select__icon {
+  top: 6px;
+  height: 13px;
+  right: 5px;
+  position: absolute;
+
+
+}
+
+.select {
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  gap: 11px;
+  position: relative;
+  border: none;
+  outline-color: transparent;
+  outline-style: none;
+  color: #ebebeb;
+  outline: none;
+}
+
+.option {
+  /* or 16px */
+
+
+  /* Landing/White */
+
+  color: #EBEBEB;
+}
+
+.burger__button {
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  box-sizing: border-box;
+
+}
+
+.line__burger {
+  background-color: #FFFFFF;
+  width: 14px;
+  height: 1px;
+}
+
+@media screen and (min-width: 1600px) {
+  .header-container {
+    padding: 35px 48px;
+  }
+
+  .header-logo {
+    width: 46px;
+    height: 74px;
+  }
+
+  .header-button {
+    font-size: 20px;
+
+  }
+
+  .header-lang-button_active {
+    height: auto;
+
+  }
+  
+  .header-buttons {
+    gap: 48px;
+  }
+
+  .header-lang-button {
+    width: 70px;
+    padding: 7px 15px;
+    top: 57px;
+    }
+
+}
+
+
+@media screen and (max-width: 1279px) {
+  .header-container {
+    padding: 30px 12px;
+  }
+
+  .header-lang-button {
+    top: 40px;
+    right: 12px;
+   
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .header-container {
+    padding: 15px 12px;
+  }
+
+  .header-lang-button {
+    right: 12px;
+    top: 25%;
+  }
+}
+
+
+@media screen and (max-width: 639px) {
+  .header {
+    background: #262626;
+
+  }
+  .header-container {
+    padding: 8px 10px;
+  }
+
+
+
+  .burger__button {
+    display: flex;
+  }
+
+}
@@ -0,0 +1,84 @@
+import React, { CSSProperties, useState } from "react";
+import logo from "./logoIcon.svg";
+import chevron from "./chevronIcon.svg";
+import "./header.css";
+import "../../styles/styles.css";
+import { useLocation } from "react-router-dom";
+
+
+
+export type THeader = {
+  language: string;
+  changeLanguage: (language: string) => void;
+  text?: any;
+};
+
+export const Header: React.FC<THeader> =
+  ({ changeLanguage, language, text }) => {
+    const [open, setOpen] = useState<boolean>(false)
+    const [menuOpen, setMenuOpen] = useState(false)
+    const [opacity, setOpacity] = useState(false)
+    const userLanguage = language === 'RU';
+    const location = useLocation()
+    console.log(location)
+
+
+    function handleUpdateLanguage(value: string) {
+      changeLanguage(value)
+      setOpen(prev => !prev)
+    }
+
+    function handleOpen() {
+      setOpen(prev => !prev)
+    }
+
+    function handleOpacity() {
+      setOpacity(true)
+    }
+
+    const style = {
+      background: 'rgba(235, 235, 235, 0.2'
+    };
+
+    const iconTransform = {
+      transform: 'rotate(-90deg)'
+    } as CSSProperties
+
+    const setBackground = opacity && !open as boolean;
+
+    function setOpacityAndMenu() {
+      setMenuOpen(true)
+      const targetElement = document.querySelector('body') as HTMLElement
+      targetElement.style.overflow = 'hidden'
+    }
+
+
+    function openMenu() {
+      setMenuOpen(false)
+      const targetElement = document.querySelector('body') as HTMLElement
+      targetElement.style.overflow = 'visible'
+
+    }
+
+    return (
+      <div className={location.pathname === 'connect-page' ? 'header' : 'header-main'}>
+        <div className="header-container">
+          <img className="header-logo" alt="company-logo" src={logo} />
+          <div className="header-buttons">
+            <div className={open ? "header-lang-button header-lang-button_active" : 'header-lang-button header-lang-button_disabled'} style={setBackground ? style : { background: 'transparent' }}>
+              <img alt="img" src={chevron} className="header-select__icon" style={open ? iconTransform : {
+                transform: 'rotate(0deg)'
+              }}></img>
+              <div className="wrapper__button">
+                <div onMouseEnter={handleOpacity} onMouseLeave={() => setOpacity(false)} onClick={handleOpen} className=" header-lang-button-picked">{language}</div>
+              </div>
+              {language === 'RU' ? (<button value={'EN'} onClick={(e: any) => handleUpdateLanguage(e.target.value)} className="header-lang-button-text">EN</button>
+              ) : (<button onClick={(e: any) => handleUpdateLanguage(e.target.value)} value={'RU'} className="header-lang-button-text">RU</button>)}
+            </div>
+          </div>
+        </div>
+      </div>
+
+    );
+  }
+
@@ -0,0 +1,42 @@
+import "./playerStyles.css";
+import { useParams, useLocation } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { Sidebar } from "../sidebar/sidebar";
+import { useAppSelector } from "../../hooks/redux";
+import { connectSession } from "../../store/reducers/ActionCreator";
+
+type link = {
+  id: string;
+};
+
+export const PlayerComponent: React.FC<any> = ({ closeStream, dispatch }) => {
+  const { id } = useParams<link>();
+
+
+  const { data } = useAppSelector((state) => state.sessionReducer);
+
+  useEffect(() => {
+    if (!data) {
+      dispatch(connectSession(id));
+    }
+    console.log(data, 'data')
+  }, []);
+
+
+
+  return (
+    <>
+      {data && (
+        <iframe
+          title="stream"
+          src={data.link}
+          className={"player playerOn"}
+        ></iframe>
+      )}
+      <Sidebar
+        data={data}
+        closeStream={closeStream}
+      ></Sidebar>
+    </>
+  );
+};
@@ -0,0 +1,7 @@
+.playerOn {
+   pointer-events: all;
+}
+
+.playerOff {
+   pointer-events: none;
+}
@@ -0,0 +1,64 @@
+import { useHistory } from "react-router-dom";
+import { useAppSelector } from "../../hooks/redux";
+import "../../styles/styles.css";
+import { PayloadAction } from "@reduxjs/toolkit";
+import { IData } from "../../models/IData";
+import { sessionState } from "../../store/reducers/sessionSlice";
+
+export const PopupConnect: React.FC<any> = ({
+  setVisible,
+  text,
+  onConnect,
+  logo,
+  isLoading
+}) => {
+  const history = useHistory();
+
+  const handleConnect = () => {
+    onConnect().then((res: any) => {
+      console.log(res);
+      if (!res.error) {
+        history.push(`/stream/${res.payload.connection_code}`);
+      } else {
+        alert(res.error.message);
+      }
+    });
+  };
+
+  return (
+    <div className="popup__container">
+      <img alt="logoRC" className="logo__popup" src={logo}></img>
+      <div className="popup">
+        <div className="button__container">
+          <p className="button__title">{text.caption} </p>
+          <button
+            disabled={isLoading}
+            onClick={handleConnect}
+            className="button"
+          >
+            {text.button.connectEx}
+          </button>
+          <span className="line"></span>
+        </div>
+        <div className="button__container">
+          <p className="button__title">{text.caption1} </p>
+          <button
+            className="button button__disabled"
+            onClick={() =>
+              setVisible({
+                popup1: false,
+                popup2: true,
+              })
+            }
+          >
+            {text.button.connectNew}
+          </button>
+          <span className="line"></span>
+          <button onClick={() => history.goBack()} className="popup__caption">
+            {text.caption2}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,84 @@
+.popup__content {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.popup__title {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 22px;
+    line-height: 130%;
+    /* identical to box height, or 29px */
+    margin: 0;
+
+    /* App/White */
+
+    color: #FFFFFF;
+
+}
+
+.logo__popup {
+    height: auto;
+    width: 100%;
+    margin-bottom: 48px;
+    object-fit: cover;
+  }
+
+  .logo__popup_ex {
+    display: none;
+  }
+  
+
+.popup__input {
+    padding: 5px 0px;
+    border-radius: 12px;
+    background: #404040;
+    height: 76px;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 38px;
+    line-height: 46px;
+    /* identical to box height */
+    text-align: center;
+
+    letter-spacing: 0.3em;
+
+    /* App/White */
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    color: #FFFFFF;
+
+}
+
+
+@media screen and (max-width: 639px) {
+
+    .logo__popup {
+        margin-bottom: 40px;
+      }
+
+      .logo__popup_ex {
+        display: block;
+        height: auto;
+        width: 100%;
+        margin-bottom: 24px;
+        object-fit: cover;    
+      }
+    
+    .popup__input {
+        height: 48px;
+        font-size: 30px;
+    }
+
+    .popup__title {
+        font-size: 16px;
+        width: 78%;
+    }
+
+    .popup__content {
+        gap: 16px;
+    }
+    
+}
@@ -0,0 +1,62 @@
+import "../../styles/styles.css";
+import "./popupConnect.css";
+import { useHistory } from "react-router-dom";
+
+export const PopupConnectEx: React.FC<any> = ({
+  setVisible,
+  text,
+  onConnect,
+  logo,
+  setValue,
+  value,
+  isLoading,
+}) => {
+  const history = useHistory();
+
+  const handleConnect = () => {
+    onConnect().then((res: any) => {
+      console.log(res);
+      if (!res.error) {
+        history.push(`/stream/${res.payload.connection_code}`);
+      } else {
+        alert(res.error.message);
+      }
+    });
+  };
+
+  return (
+    <div className="popup__container">
+      <div className="popup__content">
+        <img alt="logoRC" className="logo__popup_ex" src={logo}></img>
+        <p className="popup__title">{text.caption}</p>
+        <input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          className="popup__input"
+        ></input>
+        <button
+          onClick={handleConnect}
+          disabled={!!!value || isLoading}
+          type="submit"
+          className={
+            !!value || isLoading ? "button" : "button button__disabled"
+          }
+        >
+          {text.button}
+        </button>
+        <span className="line"></span>
+        <button
+          onClick={() =>
+            setVisible({
+              popup1: true,
+              popup2: false,
+            })
+          }
+          className="popup__caption"
+        >
+          {text.caption1}
+        </button>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,76 @@
+.popup__user {
+  position: relative;
+  width: 494px;
+  background: #262626;
+  border-radius: 32px;
+  padding: 48px;
+  box-sizing: border-box;
+}
+
+.popup__user_back {
+   position: absolute;
+   width: 16px;
+   height: 16px;
+   cursor: pointer;
+}
+
+.popup__user_content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+}
+
+.popup__user_picture {
+  background: #219653;
+  width: 198px;
+  height: 198px;
+  border-radius: 172px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup__user_name {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 38px;
+  line-height: 130%;
+  /* or 49px */
+  text-align: center;
+  /* App/White */
+  color: #ffffff;
+  border-bottom: 1px solid #FFFFFF;
+  margin: 0 0 42px;
+  width: 57%;
+}
+
+.popup__button {
+   display: none;
+}
+
+
+@media screen and (max-width: 639px) {
+   .popup__user {
+      width: 100%;
+      border-radius: 0px;
+      height: 100%;
+      padding: 32px 10px 67px;
+      height: 100vh;
+  
+   }
+   .popup__button {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+   }
+
+   .popup__user_name {
+      margin: 0 0 54px;
+   } 
+
+   .popup__user_back {
+      display: none;
+   }
+}
@@ -0,0 +1,25 @@
+import "../../styles/styles.css";
+import "./popupUser.css";
+import person from "../../images/Person.png";
+import buttonBack from "../../images/backButton.svg";
+
+export const PopupUser: React.FC = ({}) => {
+  return (
+    <div className="popup__user">
+      <img alt="btn-back" className="popup__user_back" src={buttonBack}></img>
+      <div className="popup__user_content">
+        <div className="popup__user_picture">
+          <img alt="avatar" src={person}></img>
+        </div>
+        <p className="popup__user_name">Константин Коренецкий </p>
+        <button className="button">Продолжить</button>
+        <div className="popup__button">
+          <span className="line"></span>
+          <button className="popup__caption">
+            Выбор способа демонстрации{" "}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,48 @@
+import "../sidebar/toolbar.css";
+import { useState } from "react";
+import { TUserControl } from "../../utils/types";
+import { MicroButton } from "../ui/MicroButton/MicroButton";
+import iconUser from "../../images/icons/user.svg";
+import { PopupUserControlButton } from "../popupUserControlButton/PopupUserControlButton";
+
+export const PopupUserControl: React.FC<TUserControl> = ({
+  user,
+  isAdmin,
+  sendControlRequest,
+  localUser,
+  handleControl,
+  setNotification,
+  handleReturnControl,
+  setMuted,
+  isMuted,
+}) => {
+  const handleMuteUser = () => {
+    const element = document.getElementById(user.id) as HTMLAudioElement;
+    if (isMuted) {
+      console.log(element);
+      element.volume = 1;
+      setMuted(false);
+    } else {
+      element.volume = 0;
+      setMuted(true);
+    }
+  };
+
+  return (
+    <div className="toolbar-open-add-button-container">
+      <div className="user-icon">
+        <img alt="icon" className="toolbar-icon" src={iconUser}></img>
+      </div>
+      <MicroButton isMuted={isMuted} onClick={handleMuteUser}></MicroButton>
+      <PopupUserControlButton
+        handleControl={handleControl}
+        localUser={localUser}
+        sendControlRequest={sendControlRequest}
+        isAdmin={isAdmin}
+        setNotification={setNotification}
+        user={user}
+        handleReturnControl={handleReturnControl}
+      ></PopupUserControlButton>
+    </div>
+  );
+};
@@ -0,0 +1,126 @@
+import control from "../../images/icons/control.svg";
+import "../sidebar/toolbar.css";
+import { useState } from "react";
+import controlOff from "../../images/icons/control.svg";
+
+export const PopupUserControlButton: React.FC<any> = ({
+  isAdmin,
+  user,
+  sendControlRequest,
+  localUser,
+  handleControl,
+  setNotification,
+  handleReturnControl,
+}) => {
+  const [show, setShow] = useState(false);
+  const isUserAdmin = isAdmin(user);
+
+  function onChangeControl() {
+    handleControl(user.id);
+    setShow(false);
+    setNotification(false);
+  }
+
+  return (
+    <div>
+      {!show ? (
+        <>
+          {" "}
+          {isUserAdmin ? (
+            <>
+              {user.control ? (
+                <button
+                  onClick={() => handleReturnControl()}
+                  className="control-button"
+                >
+                  <img
+                    alt="icon"
+                    src={control}
+                    className="control-button-icon"
+                  ></img>
+                  <span className="constrol-button-title">
+                    Вернуть управление
+                  </span>
+                </button>
+              ) : (
+                <button
+                  onClick={() => setShow((prev) => !prev)}
+                  className="control-button"
+                >
+                  <img
+                    alt="icon"
+                    src={control}
+                    className="control-button-icon"
+                  ></img>
+                  <span className="constrol-button-title">
+                    Передать управление
+                  </span>
+                </button>
+              )}
+            </>
+          ) : (
+            <>
+              {user.admin ? (
+                <>
+                  {!user.control ? (
+                    <button
+                      onClick={() => handleReturnControl()}
+                      className="control-button"
+                    >
+                      <img
+                        alt="icon"
+                        src={control}
+                        className="control-button-icon"
+                      ></img>
+                      <span className="constrol-button-title">
+                        Вернуть управление
+                      </span>
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => sendControlRequest(localUser)}
+                      className="control-button"
+                    >
+                      <img
+                        alt="icon"
+                        src={control}
+                        className="control-button-icon"
+                      ></img>
+                      <span className="constrol-button-title">
+                        Запросить управление
+                      </span>
+                    </button>
+                  )}
+                </>
+              ) : (
+                <div className="empty__block"></div>
+              )}
+            </>
+          )}
+        </>
+      ) : (
+        <div className="toolbar-confirm-block">
+          {" "}
+          <button
+            onClick={() => setShow((prev) => !prev)}
+            className="toolbar-button no medium"
+          >
+            <div className="toolbar-button-medium-view">
+              <img className="" src={controlOff}></img>
+              <span className="toolbar-button-medium-view-title">Нет</span>
+            </div>
+          </button>
+          <button
+            onClick={onChangeControl}
+            className="toolbar-button yes medium"
+          >
+            <div className="toolbar-button-medium-view">
+              <img className="" src={control}></img>
+              <span className="toolbar-button-medium-view-title">Да</span>
+            </div>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 17L11 12L16 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 22L7 12L7 2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#2F80ED"/>
+<path d="M27.2145 28.2667L27.4783 28.6914H27.4783L27.2145 28.2667ZM12.8009 28.2667L13.0647 27.8419H13.0647L12.8009 28.2667ZM12.0075 26.5842L11.5093 26.5415L12.0075 26.5842ZM28.0079 26.5842L27.5097 26.627L27.5097 26.627L28.0079 26.5842ZM27.2779 24.0084L26.8218 24.2132L27.2779 24.0084ZM12.7375 24.0084L12.2814 23.8035L12.7375 24.0084ZM25.9965 21.9271L26.351 21.5745L25.9965 21.9271ZM14.0189 21.9271L14.3734 22.2796L14.0189 21.9271ZM20.0077 22.6252V23.1252V22.6252ZM24.1114 14.6038C24.1114 15.7464 23.6451 16.9349 22.8815 17.836C22.1186 18.7363 21.0975 19.3077 20.0076 19.3077V20.3077C21.4603 20.3077 22.7411 19.5485 23.6445 18.4825C24.5471 17.4173 25.1114 16.0039 25.1114 14.6038H24.1114ZM20.0076 19.3077C18.9177 19.3077 17.8966 18.7363 17.1336 17.836C16.3701 16.9349 15.9038 15.7464 15.9038 14.6038H14.9038C14.9038 16.0039 15.4681 17.4173 16.3707 18.4825C17.274 19.5485 18.5548 20.3077 20.0076 20.3077V19.3077ZM15.9038 14.6038C15.9038 12.3374 17.7411 10.5 20.0076 10.5V9.5C17.1888 9.5 14.9038 11.7851 14.9038 14.6038H15.9038ZM20.0076 10.5C22.2741 10.5 24.1114 12.3374 24.1114 14.6038H25.1114C25.1114 11.7851 22.8264 9.5 20.0076 9.5V10.5ZM26.9506 27.8419C26.4342 28.1628 25.8601 28.3338 24.8232 28.419C23.77 28.5056 22.3003 28.5002 20.0077 28.5002V29.5002C22.2755 29.5002 23.7998 29.5065 24.9052 29.4157C26.0268 29.3234 26.776 29.1277 27.4783 28.6914L26.9506 27.8419ZM20.0077 28.5002C17.715 28.5002 16.2454 28.5056 15.1922 28.419C14.1552 28.3338 13.5812 28.1628 13.0647 27.8419L12.5371 28.6914C13.2394 29.1277 13.9886 29.3234 15.1102 29.4157C16.2156 29.5065 17.7399 29.5002 20.0077 29.5002V28.5002ZM11.5093 26.5415C11.4375 27.3781 11.7853 28.2244 12.5371 28.6914L13.0647 27.8419C12.6758 27.6003 12.4614 27.1419 12.5056 26.627L11.5093 26.5415ZM27.5097 26.627C27.5539 27.1419 27.3396 27.6003 26.9506 27.8419L27.4783 28.6914C28.23 28.2244 28.5779 27.3781 28.5061 26.5415L27.5097 26.627ZM26.8218 24.2132C27.1389 24.9195 27.4373 25.783 27.5097 26.627L28.5061 26.5415C28.4201 25.5396 28.0735 24.5596 27.734 23.8035L26.8218 24.2132ZM12.5056 26.627C12.5781 25.783 12.8765 24.9195 13.1936 24.2132L12.2814 23.8035C11.9419 24.5596 11.5953 25.5396 11.5093 26.5415L12.5056 26.627ZM13.1936 24.2132C13.6265 23.2491 13.7723 22.8841 14.3734 22.2796L13.6643 21.5745C12.9194 22.3236 12.7107 22.8476 12.2814 23.8035L13.1936 24.2132ZM27.734 23.8035C27.3047 22.8476 27.096 22.3236 26.351 21.5745L25.642 22.2796C26.2431 22.8841 26.3888 23.2491 26.8218 24.2132L27.734 23.8035ZM26.351 21.5745C25.8449 21.0656 25.2894 20.8426 24.7027 20.825C24.1434 20.8083 23.592 20.9801 23.0838 21.1778C22.8269 21.2777 22.5642 21.3914 22.3099 21.4995C22.0518 21.6092 21.7975 21.7154 21.5399 21.8091C21.0242 21.9967 20.5197 22.1252 20.0077 22.1252V23.1252C20.6847 23.1252 21.3137 22.9555 21.8818 22.7488C22.1662 22.6453 22.4414 22.5302 22.7011 22.4198C22.9646 22.3078 23.208 22.2025 23.4463 22.1098C23.9284 21.9222 24.3235 21.8141 24.6728 21.8245C24.9946 21.8342 25.3097 21.9455 25.642 22.2796L26.351 21.5745ZM20.0077 22.1252C19.4957 22.1252 18.9912 21.9967 18.4755 21.8091C18.2179 21.7154 17.9636 21.6092 17.7055 21.4995C17.4512 21.3914 17.1884 21.2777 16.9316 21.1778C16.4234 20.9801 15.8719 20.8083 15.3127 20.825C14.726 20.8426 14.1704 21.0656 13.6643 21.5745L14.3734 22.2796C14.7057 21.9455 15.0208 21.8342 15.3426 21.8245C15.6918 21.8141 16.0869 21.9222 16.569 22.1098C16.8074 22.2025 17.0507 22.3078 17.3143 22.4198C17.574 22.5302 17.8492 22.6453 18.1335 22.7488C18.7017 22.9555 19.3307 23.1252 20.0077 23.1252V22.1252Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 14.5C3.72386 14.5 3.5 14.7238 3.5 15C3.5 15.2761 3.72386 15.5 4 15.5V14.5ZM8.99977 15H9.49977C9.49977 14.7238 9.27592 14.5 8.99977 14.5V15ZM8.49977 19.9998C8.49977 20.2759 8.72363 20.4998 8.99977 20.4998C9.27592 20.4998 9.49977 20.2759 9.49977 19.9998H8.49977ZM3.64645 19.6462C3.45118 19.8415 3.45118 20.158 3.64645 20.3533C3.84171 20.5486 4.15829 20.5486 4.35355 20.3533L3.64645 19.6462ZM20.3536 4.35374C20.5488 4.15848 20.5488 3.84189 20.3536 3.64663C20.1583 3.45137 19.8417 3.45137 19.6464 3.64663L20.3536 4.35374ZM15 9.00018H14.5C14.5 9.27633 14.7238 9.50018 15 9.50018V9.00018ZM15.5 4.00018C15.5 3.72404 15.2761 3.50018 15 3.50018C14.7238 3.50018 14.5 3.72404 14.5 4.00018H15.5ZM20 9.50018C20.2761 9.50018 20.5 9.27633 20.5 9.00018C20.5 8.72404 20.2761 8.50018 20 8.50018V9.50018ZM4 15.5H8.99977V14.5H4V15.5ZM8.49977 15V19.9998H9.49977V15H8.49977ZM8.64622 14.6464L3.64645 19.6462L4.35355 20.3533L9.35333 15.3535L8.64622 14.6464ZM19.6464 3.64663L14.6464 8.64663L15.3535 9.35374L20.3536 4.35374L19.6464 3.64663ZM14.5 4.00018V9.00018H15.5V4.00018H14.5ZM15 9.50018H20V8.50018H15V9.50018Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5714 5.8125C10.5714 5.4375 10.3238 4.6875 9.33333 4.6875C8.34286 4.6875 8.09524 5.4375 8.09524 5.8125V6.5M10.5714 5.8125V4.125C10.5714 3.75 10.819 3 11.8095 3C12.8 3 13.0476 3.75 13.0476 4.125V5.25M10.5714 5.8125V9M13.0476 5.25C13.0476 4.875 13.2952 4.125 14.2857 4.125C15.2762 4.125 15.5238 4.875 15.5238 5.25V7.5M13.0476 5.25V11.5M15.5238 7.5C15.5238 7.125 15.7714 6.375 16.7619 6.375C17.7524 6.375 18 7.125 18 7.5V15.375C18 15.5659 17.9885 15.7762 17.963 16M15.5238 7.5V13.125M8.09524 12V13.6875C8.09524 13.6875 7.47619 13.125 7.47619 12C7.47619 11.625 7.22857 10.875 6.2381 10.875C5.24762 10.875 5 11.625 5 12C5 13.6875 5 21 12.4286 21C13.881 21 14.9785 20.6018 15.7981 20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6L19 20" stroke="#EC1F1F" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5714 5.8125C10.5714 5.4375 10.3238 4.6875 9.33333 4.6875C8.34286 4.6875 8.09524 5.4375 8.09524 5.8125V13.6875C8.09524 13.6875 7.47619 13.125 7.47619 12C7.47619 11.625 7.22857 10.875 6.2381 10.875C5.24762 10.875 5 11.625 5 12C5 13.6875 5 21 12.4286 21C16.8857 21 18 17.25 18 15.375V7.5C18 7.125 17.7524 6.375 16.7619 6.375C15.7714 6.375 15.5238 7.125 15.5238 7.5M10.5714 5.8125V4.125C10.5714 3.75 10.819 3 11.8095 3C12.8 3 13.0476 3.75 13.0476 4.125V5.25M10.5714 5.8125V12.5625M13.0476 5.25C13.0476 4.875 13.2952 4.125 14.2857 4.125C15.2762 4.125 15.5238 4.875 15.5238 5.25V7.5M13.0476 5.25V12M15.5238 7.5V13.125" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#4F4F4F"/>
+<path d="M18.5714 13.8125C18.5714 13.4375 18.3238 12.6875 17.3333 12.6875C16.3429 12.6875 16.0952 13.4375 16.0952 13.8125V14.5M18.5714 13.8125V12.125C18.5714 11.75 18.819 11 19.8095 11C20.8 11 21.0476 11.75 21.0476 12.125V13.25M18.5714 13.8125V17M21.0476 13.25C21.0476 12.875 21.2952 12.125 22.2857 12.125C23.2762 12.125 23.5238 12.875 23.5238 13.25V15.5M21.0476 13.25V19.5M23.5238 15.5C23.5238 15.125 23.7714 14.375 24.7619 14.375C25.7524 14.375 26 15.125 26 15.5V23.375C26 23.5659 25.9885 23.7762 25.963 24M23.5238 15.5V21.125M16.0952 20V21.6875C16.0952 21.6875 15.4762 21.125 15.4762 20C15.4762 19.625 15.2286 18.875 14.2381 18.875C13.2476 18.875 13 19.625 13 20C13 21.6875 13 29 20.4286 29C21.881 29 22.9785 28.6018 23.7981 28" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 14L27 28" stroke="#EC1F1F" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8.22609C8 6.99665 9.02335 6 10.2857 6H15.7143C16.9767 6 18 6.99665 18 8.22609V17.7739C18 19.0033 16.9767 20 15.7143 20H10.2857C9.02335 20 8 19.0033 8 17.7739V8.22609Z" stroke="white" stroke-linecap="round"/>
+<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="white" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="19" height="26" viewBox="0 0 19 26" preserveAspectRatio='none' fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 1C18.5 0.815602 18.3985 0.646172 18.2359 0.559163C18.0734 0.472153 17.8761 0.481689 17.7227 0.583975L2.2188 10.9199C0.734468 11.9094 0.734468 14.0906 2.2188 15.0801L17.7227 25.416C17.8761 25.5183 18.0734 25.5278 18.2359 25.4408C18.3985 25.3538 18.5 25.1844 18.5 25V1Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg width="65" height="26" viewBox="0 0 65 26" preserveAspectRatio='none' fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 1C19.5 0.815602 19.3985 0.646172 19.2359 0.559163C19.0734 0.472153 18.8761 0.481689 18.7227 0.583975L3.2188 10.9199C1.73447 11.9094 1.73447 14.0906 3.2188 15.0801L18.7227 25.416C18.8761 25.5183 19.0734 25.5278 19.2359 25.4408C19.3985 25.3538 19.5 25.1844 19.5 25V1Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
+<mask id="path-2-outside-1_180_736" maskUnits="userSpaceOnUse" x="19" y="0" width="46" height="26" fill="black">
+<rect fill="white" x="19" width="46" height="26"/>
+<path d="M19 1H52C58.6274 1 64 6.37258 64 13C64 19.6274 58.6274 25 52 25H19V1Z"/>
+</mask>
+<path d="M19 1H52C58.6274 1 64 6.37258 64 13C64 19.6274 58.6274 25 52 25H19V1Z" fill="#333333"/>
+<path d="M19 0H52C59.1797 0 65 5.8203 65 13H63C63 6.92487 58.0751 2 52 2H19V0ZM65 13C65 20.1797 59.1797 26 52 26H19V24H52C58.0751 24 63 19.0751 63 13H65ZM19 25V1V25ZM52 0C59.1797 0 65 5.8203 65 13C65 20.1797 59.1797 26 52 26V24C58.0751 24 63 19.0751 63 13C63 6.92487 58.0751 2 52 2V0Z" fill="#4F4F4F" mask="url(#path-2-outside-1_180_736)"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#4F4F4F"/>
+<path d="M12 22.5C11.7239 22.5 11.5 22.7239 11.5 23C11.5 23.2761 11.7239 23.5 12 23.5V22.5ZM16.9998 23H17.4998C17.4998 22.7239 17.2759 22.5 16.9998 22.5V23ZM16.4998 27.9998C16.4998 28.2759 16.7236 28.4998 16.9998 28.4998C17.2759 28.4998 17.4998 28.2759 17.4998 27.9998H16.4998ZM11.6464 27.6462C11.4512 27.8415 11.4512 28.1581 11.6464 28.3533C11.8417 28.5486 12.1583 28.5486 12.3536 28.3533L11.6464 27.6462ZM28.3536 12.3538C28.5488 12.1585 28.5488 11.8419 28.3536 11.6466C28.1583 11.4514 27.8417 11.4514 27.6464 11.6466L28.3536 12.3538ZM23 17.0002H22.5C22.5 17.2763 22.7238 17.5002 23 17.5002V17.0002ZM23.5 12.0002C23.5 11.7241 23.2761 11.5002 23 11.5002C22.7238 11.5002 22.5 11.7241 22.5 12.0002H23.5ZM28 17.5002C28.2761 17.5002 28.5 17.2763 28.5 17.0002C28.5 16.7241 28.2761 16.5002 28 16.5002V17.5002ZM12 23.5H16.9998V22.5H12V23.5ZM16.4998 23V27.9998H17.4998V23H16.4998ZM16.6462 22.6464L11.6464 27.6462L12.3536 28.3533L17.3533 23.3535L16.6462 22.6464ZM27.6464 11.6466L22.6464 16.6466L23.3535 17.3538L28.3536 12.3538L27.6464 11.6466ZM22.5 12.0002V17.0002H23.5V12.0002H22.5ZM23 17.5002H28V16.5002H23V17.5002Z" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16.7273C5.44772 16.7273 5 16.2796 5 15.7273V9C5 8.44772 5.44772 8 6 8H9.90483C10.2178 8 10.4716 8.25375 10.4716 8.56676C10.4716 8.87978 10.2178 9.13352 9.90483 9.13352H6.81676C6.54062 9.13352 6.31676 9.35738 6.31676 9.63352V11.2926C6.31676 11.5688 6.54062 11.7926 6.81676 11.7926H9.62145C9.93329 11.7926 10.1861 12.0454 10.1861 12.3572C10.1861 12.6691 9.93329 12.9219 9.62145 12.9219H6.81676C6.54062 12.9219 6.31676 13.1457 6.31676 13.4219V15.0938C6.31676 15.3699 6.54062 15.5938 6.81676 15.5938H9.95597C10.269 15.5938 10.5227 15.8475 10.5227 16.1605C10.5227 16.4735 10.269 16.7273 9.95597 16.7273H6Z" fill="white"/>
+<path d="M18.6225 8C18.9826 8 19.2745 8.29191 19.2745 8.65199V15.933C19.2745 16.3716 18.9189 16.7273 18.4802 16.7273C18.2197 16.7273 17.9757 16.5995 17.8274 16.3854L13.644 10.3496C13.6341 10.3353 13.6178 10.3267 13.6004 10.3267C13.571 10.3267 13.5472 10.3505 13.5472 10.3798V16.0689C13.5472 16.4325 13.2525 16.7273 12.8888 16.7273C12.5252 16.7273 12.2305 16.4325 12.2305 16.0689V8.79985C12.2305 8.3581 12.5886 8 13.0303 8C13.2927 8 13.5384 8.12867 13.6878 8.34434L17.8737 14.3862C17.8836 14.4005 17.9 14.4091 17.9174 14.4091C17.9467 14.4091 17.9705 14.3853 17.9705 14.356V8.65199C17.9705 8.29191 18.2624 8 18.6225 8Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 20.5734C15.8167 20.5734 16.0734 20.3167 16.0734 20C16.0734 19.6833 15.8167 19.4266 15.5 19.4266V20.5734ZM15.5 4.57339C15.8167 4.57339 16.0734 4.31668 16.0734 4C16.0734 3.68332 15.8167 3.42661 15.5 3.42661V4.57339ZM19 12L19.4086 12.4022C19.6283 12.1791 19.6283 11.8209 19.4086 11.5978L19 12ZM8.50018 11.4263C8.1835 11.4263 7.92678 11.683 7.92677 11.9997C7.92676 12.3164 8.18347 12.5731 8.50015 12.5731L8.50018 11.4263ZM15.0914 15.1533C14.8692 15.379 14.8721 15.742 15.0978 15.9642C15.3234 16.1863 15.6865 16.1835 15.9086 15.9578L15.0914 15.1533ZM15.9086 8.0422C15.6865 7.81652 15.3234 7.81366 15.0978 8.03581C14.8721 8.25797 14.8692 8.62101 15.0914 8.84669L15.9086 8.0422ZM15.5 19.4266L7 19.4266V20.5734L15.5 20.5734V19.4266ZM5.57339 18L5.57339 6H4.42661L4.42661 18H5.57339ZM7 4.57339L15.5 4.57339V3.42661L7 3.42661V4.57339ZM19 11.4266L8.50018 11.4263L8.50015 12.5731L19 12.5734L19 11.4266ZM18.5914 11.5978L15.0914 15.1533L15.9086 15.9578L19.4086 12.4022L18.5914 11.5978ZM19.4086 11.5978L15.9086 8.0422L15.0914 8.84669L18.5914 12.4022L19.4086 11.5978ZM5.57339 6C5.57339 5.21211 6.21211 4.57339 7 4.57339V3.42661C5.57875 3.42661 4.42661 4.57875 4.42661 6H5.57339ZM7 19.4266C6.21211 19.4266 5.57339 18.7879 5.57339 18H4.42661C4.42661 19.4212 5.57875 20.5734 7 20.5734V19.4266Z" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#9B51E0"/>
+<path d="M27.2145 28.2667L27.4783 28.6914H27.4783L27.2145 28.2667ZM12.8009 28.2667L13.0647 27.8419H13.0647L12.8009 28.2667ZM12.0075 26.5842L11.5093 26.5415L12.0075 26.5842ZM28.0079 26.5842L27.5097 26.627L27.5097 26.627L28.0079 26.5842ZM27.2779 24.0084L26.8218 24.2132L27.2779 24.0084ZM12.7375 24.0084L12.2814 23.8035L12.7375 24.0084ZM25.9965 21.9271L26.351 21.5745L25.9965 21.9271ZM14.0189 21.9271L14.3734 22.2796L14.0189 21.9271ZM20.0077 22.6252V23.1252V22.6252ZM24.1114 14.6038C24.1114 15.7464 23.6451 16.9349 22.8815 17.836C22.1186 18.7363 21.0975 19.3077 20.0076 19.3077V20.3077C21.4603 20.3077 22.7411 19.5485 23.6445 18.4825C24.5471 17.4173 25.1114 16.0039 25.1114 14.6038H24.1114ZM20.0076 19.3077C18.9177 19.3077 17.8966 18.7363 17.1336 17.836C16.3701 16.9349 15.9038 15.7464 15.9038 14.6038H14.9038C14.9038 16.0039 15.4681 17.4173 16.3707 18.4825C17.274 19.5485 18.5548 20.3077 20.0076 20.3077V19.3077ZM15.9038 14.6038C15.9038 12.3374 17.7411 10.5 20.0076 10.5V9.5C17.1888 9.5 14.9038 11.7851 14.9038 14.6038H15.9038ZM20.0076 10.5C22.2741 10.5 24.1114 12.3374 24.1114 14.6038H25.1114C25.1114 11.7851 22.8264 9.5 20.0076 9.5V10.5ZM26.9506 27.8419C26.4342 28.1628 25.8601 28.3338 24.8232 28.419C23.77 28.5056 22.3003 28.5002 20.0077 28.5002V29.5002C22.2755 29.5002 23.7998 29.5065 24.9052 29.4157C26.0268 29.3234 26.776 29.1277 27.4783 28.6914L26.9506 27.8419ZM20.0077 28.5002C17.715 28.5002 16.2454 28.5056 15.1922 28.419C14.1552 28.3338 13.5812 28.1628 13.0647 27.8419L12.5371 28.6914C13.2394 29.1277 13.9886 29.3234 15.1102 29.4157C16.2156 29.5065 17.7399 29.5002 20.0077 29.5002V28.5002ZM11.5093 26.5415C11.4375 27.3781 11.7853 28.2244 12.5371 28.6914L13.0647 27.8419C12.6758 27.6003 12.4614 27.1419 12.5056 26.627L11.5093 26.5415ZM27.5097 26.627C27.5539 27.1419 27.3396 27.6003 26.9506 27.8419L27.4783 28.6914C28.23 28.2244 28.5779 27.3781 28.5061 26.5415L27.5097 26.627ZM26.8218 24.2132C27.1389 24.9195 27.4373 25.783 27.5097 26.627L28.5061 26.5415C28.4201 25.5396 28.0735 24.5596 27.734 23.8035L26.8218 24.2132ZM12.5056 26.627C12.5781 25.783 12.8765 24.9195 13.1936 24.2132L12.2814 23.8035C11.9419 24.5596 11.5953 25.5396 11.5093 26.5415L12.5056 26.627ZM13.1936 24.2132C13.6265 23.2491 13.7723 22.8841 14.3734 22.2796L13.6643 21.5745C12.9194 22.3236 12.7107 22.8476 12.2814 23.8035L13.1936 24.2132ZM27.734 23.8035C27.3047 22.8476 27.096 22.3236 26.351 21.5745L25.642 22.2796C26.2431 22.8841 26.3888 23.2491 26.8218 24.2132L27.734 23.8035ZM26.351 21.5745C25.8449 21.0656 25.2894 20.8426 24.7027 20.825C24.1434 20.8083 23.592 20.9801 23.0838 21.1778C22.8269 21.2777 22.5642 21.3914 22.3099 21.4995C22.0518 21.6092 21.7975 21.7154 21.5399 21.8091C21.0242 21.9967 20.5197 22.1252 20.0077 22.1252V23.1252C20.6847 23.1252 21.3137 22.9555 21.8818 22.7488C22.1662 22.6453 22.4414 22.5302 22.7011 22.4198C22.9646 22.3078 23.208 22.2025 23.4463 22.1098C23.9284 21.9222 24.3235 21.8141 24.6728 21.8245C24.9946 21.8342 25.3097 21.9455 25.642 22.2796L26.351 21.5745ZM20.0077 22.1252C19.4957 22.1252 18.9912 21.9967 18.4755 21.8091C18.2179 21.7154 17.9636 21.6092 17.7055 21.4995C17.4512 21.3914 17.1884 21.2777 16.9316 21.1778C16.4234 20.9801 15.8719 20.8083 15.3127 20.825C14.726 20.8426 14.1704 21.0656 13.6643 21.5745L14.3734 22.2796C14.7057 21.9455 15.0208 21.8342 15.3426 21.8245C15.6918 21.8141 16.0869 21.9222 16.569 22.1098C16.8074 22.2025 17.0507 22.3078 17.3143 22.4198C17.574 22.5302 17.8492 22.6453 18.1335 22.7488C18.7017 22.9555 19.3307 23.1252 20.0077 23.1252V22.1252Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 6.5C11.5 6.16667 11.3 5.5 10.5 5.5C9.7 5.5 9.5 6.16667 9.5 6.5V13.5C9.5 13.5 9 13 9 12C9 11.6667 8.8 11 8 11C7.2 11 7 11.6667 7 12C7 13.5 7 20 13 20C16.6 20 17.5 16.6667 17.5 15V8C17.5 7.66667 17.3 7 16.5 7C15.7 7 15.5 7.66667 15.5 8M11.5 6.5V5C11.5 4.66667 11.7 4 12.5 4C13.3 4 13.5 4.66667 13.5 5V6M11.5 6.5V12.5M13.5 6C13.5 5.66667 13.7 5 14.5 5C15.3 5 15.5 5.66667 15.5 6V8M13.5 6V12M15.5 8V13" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#4F4F4F"/>
+<path d="M23.5 21.9V13.6C23.5 12.7163 22.7837 12 21.9 12H18.1C17.2163 12 16.5 12.7163 16.5 13.6V14.5M26 22C26 22.5305 25.8967 23.0368 25.7092 23.5M14 22C14 24.2091 15.7909 26 18 26H20M22 26H20M20 26V28.9998M20 28.9998H17.6M20 28.9998H22.4M16.5 20V21.9C16.5 22.7837 17.2163 23.5 18.1 23.5H20" stroke="white" stroke-linecap="round"/>
+<path d="M13 14L27 28" stroke="#EC1F1F" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 13.9V5.6C15.5 4.71634 14.7837 4 13.9 4H10.1C9.21634 4 8.5 4.71634 8.5 5.6V6.5M18 14C18 14.5305 17.8967 15.0368 17.7092 15.5M6 14C6 16.2091 7.79086 18 10 18H12M14 18H12M12 18V20.9998M12 20.9998H9.6M12 20.9998H14.4M8.5 12V13.9C8.5 14.7837 9.21634 15.5 10.1 15.5H12" stroke="white" stroke-linecap="round"/>
+<path d="M5 6L19 20" stroke="#EC1F1F" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 14C18 16.2091 16.2091 18 14 18H12M6 14C6 16.2091 7.79086 18 10 18H12M12 18V20.9998M12 20.9998H9.6M12 20.9998H14.4M10.1 15.5H13.9C14.7837 15.5 15.5 14.7837 15.5 13.9V5.6C15.5 4.71634 14.7837 4 13.9 4H10.1C9.21634 4 8.5 4.71634 8.5 5.6V13.9C8.5 14.7837 9.21634 15.5 10.1 15.5Z" stroke="white" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_688_6251" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-3" y="-3" width="21" height="32">
+<path d="M17.5 -2C17.5 -2.18939 17.393 -2.36252 17.2236 -2.44721C17.0542 -2.53191 16.8515 -2.51363 16.7 -2.4L-1.16667 11C-2.5 12 -2.5 14 -1.16667 15L16.7 28.4C16.8515 28.5136 17.0542 28.5319 17.2236 28.4472C17.393 28.3625 17.5 28.1894 17.5 28V-2Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
+</mask>
+<g mask="url(#mask0_688_6251)">
+<path d="M18.5 1C18.5 0.815602 18.3985 0.646172 18.2359 0.559163C18.0734 0.472153 17.8761 0.481689 17.7227 0.583975L2.2188 10.9199C0.734468 11.9094 0.734468 14.0906 2.2188 15.0801L17.7227 25.416C17.8761 25.5183 18.0734 25.5278 18.2359 25.4408C18.3985 25.3538 18.5 25.1844 18.5 25V1Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 20.5C9.27614 20.5 9.5 20.2761 9.5 20C9.5 19.7239 9.27614 19.5 9 19.5V20.5ZM4 20H3.5C3.5 20.2761 3.72386 20.5 4 20.5V20ZM4.5 15C4.5 14.7239 4.27614 14.5 4 14.5C3.72386 14.5 3.5 14.7239 3.5 15H4.5ZM9.35355 15.3536C9.54882 15.1583 9.54882 14.8417 9.35355 14.6464C9.15829 14.4512 8.84171 14.4512 8.64645 14.6464L9.35355 15.3536ZM14.6464 8.64645C14.4512 8.84171 14.4512 9.15829 14.6464 9.35355C14.8417 9.54882 15.1583 9.54882 15.3536 9.35355L14.6464 8.64645ZM20.3536 4.35355C20.5488 4.15829 20.5488 3.84171 20.3536 3.64645C20.1583 3.45118 19.8417 3.45118 19.6464 3.64645L20.3536 4.35355ZM19.497 9C19.497 9.27614 19.7208 9.5 19.997 9.5C20.2731 9.5 20.497 9.27614 20.497 9H19.497ZM19.997 4H20.497C20.497 3.8674 20.4443 3.74022 20.3505 3.64645C20.2567 3.55268 20.1296 3.5 19.997 3.5V4ZM15 3.5C14.7239 3.5 14.5 3.72386 14.5 4C14.5 4.27615 14.7239 4.5 15 4.5V3.5ZM9 19.5H4V20.5H9V19.5ZM4.5 20V15H3.5V20H4.5ZM4.35355 20.3536L9.35355 15.3536L8.64645 14.6464L3.64645 19.6464L4.35355 20.3536ZM15.3536 9.35355L20.3536 4.35355L19.6464 3.64645L14.6464 8.64645L15.3536 9.35355ZM20.497 9V4H19.497V9H20.497ZM19.997 3.5L15 3.5V4.5L19.997 4.5V3.5Z" fill="white"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12Z" fill="white"/>
+<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="white"/>
+<path d="M22 12C22 13.1046 21.1046 14 20 14C18.8954 14 18 13.1046 18 12C18 10.8954 18.8954 10 20 10C21.1046 10 22 10.8954 22 12Z" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.65838 16.7273C5.29477 16.7273 5 16.4325 5 16.0689V9C5 8.44772 5.44772 8 6 8H8.1108C8.78693 8 9.34801 8.11648 9.79403 8.34943C10.2429 8.58239 10.5781 8.90483 10.7997 9.31676C11.0213 9.72585 11.1321 10.1989 11.1321 10.7358C11.1321 11.2699 11.0199 11.7401 10.7955 12.1463C10.5739 12.5497 10.2386 12.8636 9.78977 13.0881C9.34375 13.3125 8.78267 13.4247 8.10653 13.4247H6.31676C6.00375 13.4247 5.75 13.171 5.75 12.858C5.75 12.5449 6.00375 12.2912 6.31676 12.2912H7.98722C8.41335 12.2912 8.75994 12.2301 9.02699 12.108C9.29688 11.9858 9.49432 11.8082 9.61932 11.5753C9.74432 11.3423 9.80682 11.0625 9.80682 10.7358C9.80682 10.4062 9.7429 10.1207 9.61506 9.87926C9.49006 9.63778 9.29261 9.45312 9.02273 9.32528C8.75568 9.1946 8.40483 9.12926 7.97017 9.12926H6.81676C6.54062 9.12926 6.31676 9.35312 6.31676 9.62926V16.0689C6.31676 16.4325 6.02199 16.7273 5.65838 16.7273ZM8.92687 12.7898C9.16203 12.7898 9.37847 12.918 9.49141 13.1243L10.9325 15.7559C11.172 16.1932 10.8556 16.7273 10.357 16.7273C10.1153 16.7273 9.89316 16.5944 9.77884 16.3814L8.35977 13.7378C8.1296 13.309 8.44021 12.7898 8.92687 12.7898Z" fill="white"/>
+<path d="M18.3466 8.66051C18.3466 8.29572 18.6423 8 19.0071 8C19.3719 8 19.6676 8.29572 19.6676 8.66051V13.7401C19.6676 14.3509 19.5241 14.892 19.2372 15.3636C18.9503 15.8324 18.5469 16.2017 18.027 16.4716C17.5071 16.7386 16.8977 16.8722 16.1989 16.8722C15.5028 16.8722 14.8949 16.7386 14.375 16.4716C13.8551 16.2017 13.4517 15.8324 13.1648 15.3636C12.8778 14.892 12.7344 14.3509 12.7344 13.7401V8.65838C12.7344 8.29477 13.0291 8 13.3928 8C13.7564 8 14.0511 8.29477 14.0511 8.65838V13.6335C14.0511 14.0284 14.1378 14.3793 14.3111 14.6861C14.4872 14.9929 14.7358 15.2344 15.0568 15.4105C15.3778 15.5838 15.7585 15.6705 16.1989 15.6705C16.642 15.6705 17.0241 15.5838 17.3452 15.4105C17.669 15.2344 17.9162 14.9929 18.0866 14.6861C18.2599 14.3793 18.3466 14.0284 18.3466 13.6335V8.66051Z" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#27AE60"/>
+<path d="M27.2145 28.2667L27.4783 28.6914H27.4783L27.2145 28.2667ZM12.8009 28.2667L13.0647 27.8419H13.0647L12.8009 28.2667ZM12.0075 26.5842L11.5093 26.5415L12.0075 26.5842ZM28.0079 26.5842L27.5097 26.627L27.5097 26.627L28.0079 26.5842ZM27.2779 24.0084L26.8218 24.2132L27.2779 24.0084ZM12.7375 24.0084L12.2814 23.8035L12.7375 24.0084ZM25.9965 21.9271L26.351 21.5745L25.9965 21.9271ZM14.0189 21.9271L14.3734 22.2796L14.0189 21.9271ZM20.0077 22.6252V23.1252V22.6252ZM24.1114 14.6038C24.1114 15.7464 23.6451 16.9349 22.8815 17.836C22.1186 18.7363 21.0975 19.3077 20.0076 19.3077V20.3077C21.4603 20.3077 22.7411 19.5485 23.6445 18.4825C24.5471 17.4173 25.1114 16.0039 25.1114 14.6038H24.1114ZM20.0076 19.3077C18.9177 19.3077 17.8966 18.7363 17.1336 17.836C16.3701 16.9349 15.9038 15.7464 15.9038 14.6038H14.9038C14.9038 16.0039 15.4681 17.4173 16.3707 18.4825C17.274 19.5485 18.5548 20.3077 20.0076 20.3077V19.3077ZM15.9038 14.6038C15.9038 12.3374 17.7411 10.5 20.0076 10.5V9.5C17.1888 9.5 14.9038 11.7851 14.9038 14.6038H15.9038ZM20.0076 10.5C22.2741 10.5 24.1114 12.3374 24.1114 14.6038H25.1114C25.1114 11.7851 22.8264 9.5 20.0076 9.5V10.5ZM26.9506 27.8419C26.4342 28.1628 25.8601 28.3338 24.8232 28.419C23.77 28.5056 22.3003 28.5002 20.0077 28.5002V29.5002C22.2755 29.5002 23.7998 29.5065 24.9052 29.4157C26.0268 29.3234 26.776 29.1277 27.4783 28.6914L26.9506 27.8419ZM20.0077 28.5002C17.715 28.5002 16.2454 28.5056 15.1922 28.419C14.1552 28.3338 13.5812 28.1628 13.0647 27.8419L12.5371 28.6914C13.2394 29.1277 13.9886 29.3234 15.1102 29.4157C16.2156 29.5065 17.7399 29.5002 20.0077 29.5002V28.5002ZM11.5093 26.5415C11.4375 27.3781 11.7853 28.2244 12.5371 28.6914L13.0647 27.8419C12.6758 27.6003 12.4614 27.1419 12.5056 26.627L11.5093 26.5415ZM27.5097 26.627C27.5539 27.1419 27.3396 27.6003 26.9506 27.8419L27.4783 28.6914C28.23 28.2244 28.5779 27.3781 28.5061 26.5415L27.5097 26.627ZM26.8218 24.2132C27.1389 24.9195 27.4373 25.783 27.5097 26.627L28.5061 26.5415C28.4201 25.5396 28.0735 24.5596 27.734 23.8035L26.8218 24.2132ZM12.5056 26.627C12.5781 25.783 12.8765 24.9195 13.1936 24.2132L12.2814 23.8035C11.9419 24.5596 11.5953 25.5396 11.5093 26.5415L12.5056 26.627ZM13.1936 24.2132C13.6265 23.2491 13.7723 22.8841 14.3734 22.2796L13.6643 21.5745C12.9194 22.3236 12.7107 22.8476 12.2814 23.8035L13.1936 24.2132ZM27.734 23.8035C27.3047 22.8476 27.096 22.3236 26.351 21.5745L25.642 22.2796C26.2431 22.8841 26.3888 23.2491 26.8218 24.2132L27.734 23.8035ZM26.351 21.5745C25.8449 21.0656 25.2894 20.8426 24.7027 20.825C24.1434 20.8083 23.592 20.9801 23.0838 21.1778C22.8269 21.2777 22.5642 21.3914 22.3099 21.4995C22.0518 21.6092 21.7975 21.7154 21.5399 21.8091C21.0242 21.9967 20.5197 22.1252 20.0077 22.1252V23.1252C20.6847 23.1252 21.3137 22.9555 21.8818 22.7488C22.1662 22.6453 22.4414 22.5302 22.7011 22.4198C22.9646 22.3078 23.208 22.2025 23.4463 22.1098C23.9284 21.9222 24.3235 21.8141 24.6728 21.8245C24.9946 21.8342 25.3097 21.9455 25.642 22.2796L26.351 21.5745ZM20.0077 22.1252C19.4957 22.1252 18.9912 21.9967 18.4755 21.8091C18.2179 21.7154 17.9636 21.6092 17.7055 21.4995C17.4512 21.3914 17.1884 21.2777 16.9316 21.1778C16.4234 20.9801 15.8719 20.8083 15.3127 20.825C14.726 20.8426 14.1704 21.0656 13.6643 21.5745L14.3734 22.2796C14.7057 21.9455 15.0208 21.8342 15.3426 21.8245C15.6918 21.8141 16.0869 21.9222 16.569 22.1098C16.8074 22.2025 17.0507 22.3078 17.3143 22.4198C17.574 22.5302 17.8492 22.6453 18.1335 22.7488C18.7017 22.9555 19.3307 23.1252 20.0077 23.1252V22.1252Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3L12.4055 2.59455C12.1815 2.37063 11.8185 2.37063 11.5945 2.59455L12 3ZM11.4266 12.5C11.4266 12.8167 11.6833 13.0734 12 13.0734C12.3167 13.0734 12.5734 12.8167 12.5734 12.5L11.4266 12.5ZM13.5945 5.40545C13.8185 5.62937 14.1815 5.62937 14.4055 5.40545C14.6294 5.18153 14.6294 4.81847 14.4055 4.59455L13.5945 5.40545ZM9.59455 4.59455C9.37063 4.81847 9.37063 5.18153 9.59455 5.40545C9.81847 5.62937 10.1815 5.62937 10.4055 5.40545L9.59455 4.59455ZM9 8.07339C9.31668 8.07339 9.57339 7.81668 9.57339 7.5C9.57339 7.18332 9.31668 6.92661 9 6.92661L9 8.07339ZM15 6.92661C14.6833 6.92661 14.4266 7.18332 14.4266 7.5C14.4266 7.81668 14.6833 8.07339 15 8.07339L15 6.92661ZM17.4266 9.5L17.4266 17L18.5734 17L18.5734 9.5L17.4266 9.5ZM16 18.4266L8 18.4266L8 19.5734L16 19.5734L16 18.4266ZM6.57339 17L6.57339 9.5L5.42661 9.5L5.42661 17L6.57339 17ZM11.4266 3L11.4266 12.5L12.5734 12.5L12.5734 3L11.4266 3ZM11.5945 3.40545L13.5945 5.40545L14.4055 4.59455L12.4055 2.59455L11.5945 3.40545ZM11.5945 2.59455L9.59455 4.59455L10.4055 5.40545L12.4055 3.40545L11.5945 2.59455ZM8 8.07339L9 8.07339L9 6.92661L8 6.92661L8 8.07339ZM16 6.92661L15 6.92661L15 8.07339L16 8.07339L16 6.92661ZM6.57339 9.5C6.57339 8.71211 7.21211 8.07339 8 8.07339L8 6.92661C6.57875 6.92661 5.42661 8.07875 5.42661 9.5L6.57339 9.5ZM8 18.4266C7.21211 18.4266 6.57339 17.7879 6.57339 17L5.42661 17C5.42661 18.4212 6.57875 19.5734 8 19.5734L8 18.4266ZM17.4266 17C17.4266 17.7879 16.7879 18.4266 16 18.4266L16 19.5734C17.4212 19.5734 18.5734 18.4212 18.5734 17L17.4266 17ZM18.5734 9.5C18.5734 8.07875 17.4212 6.92661 16 6.92661L16 8.07339C16.7879 8.07339 17.4266 8.71211 17.4266 9.5L18.5734 9.5Z" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.4375 10.8182H4.9375H5.4375ZM16.6404 5.997L17.0006 5.65027L16.6404 5.997ZM18.5 17.9881C18.5 18.2643 18.7239 18.4881 19 18.4881C19.2761 18.4881 19.5 18.2643 19.5 17.9881H18.5ZM15 13.6482C15 13.9244 15.2239 14.1482 15.5 14.1482C15.7761 14.1482 16 13.9244 16 13.6482H15ZM6.05253 9.59318C6.10399 9.32187 5.92577 9.06022 5.65446 9.00876C5.38316 8.9573 5.1215 9.13552 5.07004 9.40682L6.05253 9.59318ZM7.37755 5.28509C7.17199 5.46949 7.15484 5.78561 7.33923 5.99116C7.52363 6.19672 7.83975 6.21387 8.0453 6.02948L7.37755 5.28509ZM12 4.5C13.6016 4.5 15.1416 5.16083 16.2801 6.34373L17.0006 5.65027C15.6778 4.27585 13.8794 3.5 12 3.5V4.5ZM16.2801 6.34373C17.4193 7.52728 18.0625 9.13646 18.0625 10.8182H19.0625C19.0625 8.88332 18.3229 7.02403 17.0006 5.65027L16.2801 6.34373ZM4.9375 10.8182L4.9375 12.8115H5.9375L5.9375 10.8182H4.9375ZM18.0625 10.8182V12.8115H19.0625V10.8182H18.0625ZM6 13.1364H7.5V12.1364H6V13.1364ZM8 13.6482V17.9881H9V13.6482H8ZM7.5 18.5H6V19.5H7.5V18.5ZM5.5 17.9881V13.6482H4.5V17.9881H5.5ZM6 18.5C5.7294 18.5 5.5 18.2764 5.5 17.9881H4.5C4.5 18.8175 5.16603 19.5 6 19.5V18.5ZM8 17.9881C8 18.2764 7.7706 18.5 7.5 18.5V19.5C8.33397 19.5 9 18.8175 9 17.9881H8ZM7.5 13.1364C7.7706 13.1364 8 13.36 8 13.6482H9C9 12.8188 8.33397 12.1364 7.5 12.1364V13.1364ZM6 12.1364C5.16603 12.1364 4.5 12.8188 4.5 13.6482H5.5C5.5 13.36 5.7294 13.1364 6 13.1364V12.1364ZM16.5 13.1364H18V12.1364H16.5V13.1364ZM18.5 13.6482V17.9881H19.5V13.6482H18.5ZM18 13.1364C18.2706 13.1364 18.5 13.36 18.5 13.6482H19.5C19.5 12.8188 18.834 12.1364 18 12.1364V13.1364ZM16.5 12.1364C15.666 12.1364 15 12.8188 15 13.6482H16C16 13.36 16.2294 13.1364 16.5 13.1364V12.1364ZM5.9375 10.8182C5.9375 10.4038 5.97656 9.9937 6.05253 9.59318L5.07004 9.40682C4.98248 9.86847 4.9375 10.341 4.9375 10.8182H5.9375ZM8.0453 6.02948C9.14331 5.0445 10.5461 4.5 12 4.5V3.5C10.2943 3.5 8.655 4.13914 7.37755 5.28509L8.0453 6.02948Z" fill="white"/>
+<path d="M5 6L19 20" stroke="#EC1F1F" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.4375 12.8115L5.4375 10.8182C5.4375 9.00989 6.1289 7.27566 7.35961 5.997C8.59032 4.71834 10.2595 4 12 4C13.7405 4 15.4097 4.71834 16.6404 5.997C17.8711 7.27566 18.5625 9.00989 18.5625 10.8182V12.8115M6 19H7.5C8.05228 19 8.5 18.547 8.5 17.9881V13.6482C8.5 13.0894 8.05228 12.6364 7.5 12.6364H6C5.44772 12.6364 5 13.0894 5 13.6482V17.9881C5 18.547 5.44772 19 6 19ZM16.5 19H18C18.5523 19 19 18.547 19 17.9881V13.6482C19 13.0894 18.5523 12.6364 18 12.6364H16.5C15.9477 12.6364 15.5 13.0894 15.5 13.6482V17.9881C15.5 18.547 15.9477 19 16.5 19Z" stroke="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2145 20.2667L19.4783 20.6914H19.4783L19.2145 20.2667ZM4.80091 20.2667L5.06475 19.8419H5.06475L4.80091 20.2667ZM4.00747 18.5842L3.5093 18.5415L4.00747 18.5842ZM20.0079 18.5842L19.5097 18.627L19.5097 18.627L20.0079 18.5842ZM19.2779 16.0084L18.8218 16.2132L19.2779 16.0084ZM4.7375 16.0084L4.28138 15.8035L4.7375 16.0084ZM17.9965 13.9271L18.351 13.5745L17.9965 13.9271ZM6.01888 13.9271L6.37342 14.2796L6.01888 13.9271ZM12.0077 14.6252V15.1252V14.6252ZM16.1114 6.60385C16.1114 7.74638 15.6451 8.93493 14.8815 9.836C14.1186 10.7363 13.0975 11.3077 12.0076 11.3077V12.3077C13.4603 12.3077 14.7411 11.5485 15.6445 10.4825C16.5471 9.41732 17.1114 8.00394 17.1114 6.60385H16.1114ZM12.0076 11.3077C10.9177 11.3077 9.89659 10.7363 9.13364 9.836C8.37005 8.93493 7.90376 7.74638 7.90376 6.60385H6.90376C6.90376 8.00394 7.46806 9.41732 8.37073 10.4825C9.27404 11.5485 10.5548 12.3077 12.0076 12.3077V11.3077ZM7.90376 6.60385C7.90376 4.33735 9.7411 2.5 12.0076 2.5V1.5C9.18881 1.5 6.90376 3.78507 6.90376 6.60385H7.90376ZM12.0076 2.5C14.2741 2.5 16.1114 4.33735 16.1114 6.60385H17.1114C17.1114 3.78507 14.8264 1.5 12.0076 1.5V2.5ZM18.9506 19.8419C18.4342 20.1628 17.8601 20.3338 16.8232 20.419C15.77 20.5056 14.3003 20.5002 12.0077 20.5002V21.5002C14.2755 21.5002 15.7998 21.5065 16.9052 21.4157C18.0268 21.3234 18.776 21.1277 19.4783 20.6914L18.9506 19.8419ZM12.0077 20.5002C9.71505 20.5002 8.24536 20.5056 7.19216 20.419C6.15524 20.3338 5.58123 20.1628 5.06475 19.8419L4.53707 20.6914C5.23943 21.1277 5.98857 21.3234 7.11022 21.4157C8.21558 21.5065 9.73986 21.5002 12.0077 21.5002V20.5002ZM3.5093 18.5415C3.4375 19.3781 3.78534 20.2244 4.53707 20.6914L5.06475 19.8419C4.67581 19.6003 4.46144 19.1419 4.50564 18.627L3.5093 18.5415ZM19.5097 18.627C19.5539 19.1419 19.3396 19.6003 18.9506 19.8419L19.4783 20.6914C20.23 20.2244 20.5779 19.3781 20.5061 18.5415L19.5097 18.627ZM18.8218 16.2132C19.1389 16.9195 19.4373 17.783 19.5097 18.627L20.5061 18.5415C20.4201 17.5396 20.0735 16.5596 19.734 15.8035L18.8218 16.2132ZM4.50564 18.627C4.57808 17.783 4.87646 16.9195 5.19362 16.2132L4.28138 15.8035C3.94187 16.5596 3.5953 17.5396 3.5093 18.5415L4.50564 18.627ZM5.19362 16.2132C5.62655 15.2491 5.77231 14.8841 6.37342 14.2796L5.66434 13.5745C4.91939 14.3236 4.71065 14.8476 4.28138 15.8035L5.19362 16.2132ZM19.734 15.8035C19.3047 14.8476 19.096 14.3236 18.351 13.5745L17.642 14.2796C18.2431 14.8841 18.3888 15.2491 18.8218 16.2132L19.734 15.8035ZM18.351 13.5745C17.8449 13.0656 17.2894 12.8426 16.7027 12.825C16.1434 12.8083 15.592 12.9801 15.0838 13.1778C14.8269 13.2777 14.5642 13.3914 14.3099 13.4995C14.0518 13.6092 13.7975 13.7154 13.5399 13.8091C13.0242 13.9967 12.5197 14.1252 12.0077 14.1252V15.1252C12.6847 15.1252 13.3137 14.9555 13.8818 14.7488C14.1662 14.6453 14.4414 14.5302 14.7011 14.4198C14.9646 14.3078 15.208 14.2025 15.4463 14.1098C15.9284 13.9222 16.3235 13.8141 16.6728 13.8245C16.9946 13.8342 17.3097 13.9455 17.642 14.2796L18.351 13.5745ZM12.0077 14.1252C11.4957 14.1252 10.9912 13.9967 10.4755 13.8091C10.2179 13.7154 9.96362 13.6092 9.7055 13.4995C9.4512 13.3914 9.18845 13.2777 8.93161 13.1778C8.42336 12.9801 7.87195 12.8083 7.31266 12.825C6.72595 12.8426 6.17045 13.0656 5.66434 13.5745L6.37342 14.2796C6.70572 13.9455 7.02076 13.8342 7.34258 13.8245C7.69184 13.8141 8.08695 13.9222 8.56904 14.1098C8.80738 14.2025 9.05075 14.3078 9.31427 14.4198C9.57397 14.5302 9.84918 14.6453 10.1335 14.7488C10.7017 14.9555 11.3307 15.1252 12.0077 15.1252V14.1252Z" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3999 19.4209L19.6737 19.8392L19.3999 19.4209ZM8.6001 19.4209L8.87393 19.0025H8.87393L8.6001 19.4209ZM8.0056 18.0927L7.50725 18.0521L8.0056 18.0927ZM19.9944 18.0927L19.4961 18.1333V18.1333L19.9944 18.0927ZM19.4474 16.0591L18.9874 16.2551V16.2551L19.4474 16.0591ZM8.55259 16.0591L8.09263 15.8631H8.09263L8.55259 16.0591ZM18.4873 14.416L18.8509 14.0728L18.4873 14.416ZM9.51271 14.416L9.87633 14.7592L9.51271 14.416ZM16.9495 8.63457C16.9495 9.51685 16.6071 10.4348 16.0495 11.1281C15.4914 11.822 14.7604 12.2428 13.9999 12.2428V13.2428C15.1446 13.2428 16.1384 12.6131 16.8288 11.7548C17.5197 10.8958 17.9495 9.75961 17.9495 8.63457H16.9495ZM13.9999 12.2428C13.2394 12.2428 12.5085 11.822 11.9503 11.1281C11.3927 10.4348 11.0504 9.51685 11.0504 8.63457H10.0504C10.0504 9.75961 10.4802 10.8958 11.1711 11.7548C11.8615 12.6131 12.8553 13.2428 13.9999 13.2428V12.2428ZM11.0504 8.63457C11.0504 6.87846 12.3952 5.5 13.9999 5.5V4.5C11.7943 4.5 10.0504 6.37605 10.0504 8.63457H11.0504ZM13.9999 5.5C15.6046 5.5 16.9495 6.87846 16.9495 8.63457H17.9495C17.9495 6.37604 16.2055 4.5 13.9999 4.5V5.5ZM19.1261 19.0025C18.764 19.2395 18.359 19.3703 17.5957 19.4364C16.8145 19.5041 15.7216 19.4999 14 19.4999V20.4999C15.6955 20.4999 16.8459 20.5051 17.682 20.4327C18.5361 20.3587 19.1225 20.2 19.6737 19.8392L19.1261 19.0025ZM14 19.4999C12.2784 19.4999 11.1855 19.5041 10.4043 19.4364C9.64101 19.3703 9.23596 19.2395 8.87393 19.0025L8.32628 19.8392C8.8775 20.2 9.46387 20.3587 10.318 20.4327C11.1541 20.5051 12.3045 20.4999 14 20.4999V19.4999ZM7.50725 18.0521C7.45173 18.7336 7.71871 19.4416 8.32628 19.8392L8.87393 19.0025C8.62682 18.8408 8.47254 18.5188 8.50395 18.1333L7.50725 18.0521ZM19.4961 18.1333C19.5275 18.5188 19.3732 18.8408 19.1261 19.0025L19.6737 19.8392C20.2813 19.4416 20.5483 18.7336 20.4928 18.0521L19.4961 18.1333ZM18.9874 16.2551C19.223 16.8079 19.4428 17.4798 19.4961 18.1333L20.4928 18.0521C20.4273 17.2483 20.1638 16.4648 19.9074 15.8631L18.9874 16.2551ZM8.50395 18.1333C8.55718 17.4798 8.77698 16.8079 9.01256 16.2551L8.09263 15.8631C7.83617 16.4648 7.57272 17.2483 7.50725 18.0521L8.50395 18.1333ZM9.01256 16.2551C9.33773 15.4922 9.44099 15.2204 9.87633 14.7592L9.14908 14.0728C8.57585 14.6802 8.41348 15.1102 8.09263 15.8631L9.01256 16.2551ZM19.9074 15.8631C19.5865 15.1102 19.4242 14.6802 18.8509 14.0728L18.1237 14.7592C18.559 15.2205 18.6623 15.4922 18.9874 16.2551L19.9074 15.8631ZM18.8509 14.0728C18.4523 13.6504 18.0036 13.4559 17.5224 13.4407C17.0715 13.4265 16.635 13.5723 16.251 13.7297C16.056 13.8097 15.8564 13.9006 15.6672 13.9854C15.474 14.0719 15.2864 14.1544 15.0972 14.2269C14.718 14.3723 14.3586 14.4671 14 14.4671V15.4671C14.5323 15.4671 15.0223 15.3266 15.4551 15.1607C15.672 15.0775 15.8812 14.9853 16.0759 14.898C16.2747 14.809 16.4543 14.7271 16.6303 14.655C16.9884 14.5082 17.2611 14.433 17.4909 14.4403C17.6905 14.4465 17.8941 14.516 18.1237 14.7592L18.8509 14.0728ZM14 14.4671C13.6414 14.4671 13.282 14.3723 12.9028 14.2269C12.7136 14.1544 12.526 14.0719 12.3328 13.9854C12.1436 13.9006 11.944 13.8097 11.749 13.7297C11.365 13.5723 10.9285 13.4265 10.4776 13.4407C9.99642 13.4559 9.54775 13.6504 9.14908 14.0728L9.87633 14.7592C10.1059 14.516 10.3095 14.4465 10.5091 14.4403C10.7389 14.433 11.0116 14.5082 11.3697 14.655C11.5457 14.7271 11.7253 14.809 11.9241 14.898C12.1188 14.9853 12.328 15.0775 12.5449 15.1607C12.9777 15.3266 13.4677 15.4671 14 15.4671V14.4671Z" fill="white"/>
+<path d="M4.50009 17.4981L4.78144 17.0848H4.78144L4.50009 17.4981ZM4.00467 16.347L3.50619 16.3079L4.00467 16.347ZM4.4605 14.5845L3.99784 14.3949H3.99784L4.4605 14.5845ZM5.26059 13.1605L5.63085 13.4965L5.26059 13.1605ZM9.40562 5.53851C9.6768 5.59063 9.93889 5.41305 9.99101 5.14187C10.0431 4.87069 9.86556 4.6086 9.59438 4.55648L9.40562 5.53851ZM9.61866 12.1355C9.88691 12.0699 10.0512 11.7994 9.98572 11.5311C9.92018 11.2628 9.6496 11.0985 9.38134 11.164L9.61866 12.1355ZM6.08951 18.4547C6.36495 18.4745 6.60426 18.2672 6.62402 17.9918C6.64379 17.7164 6.43653 17.477 6.1611 17.4573L6.08951 18.4547ZM7.58938 13.7986C7.84316 13.9075 8.13714 13.79 8.246 13.5362C8.35487 13.2824 8.23739 12.9885 7.98361 12.8796L7.58938 13.7986ZM8.99994 11.2104C8.4065 11.2104 7.82021 10.8682 7.36279 10.2767C6.90694 9.68726 6.62531 8.9037 6.62531 8.14996H5.62531C5.62531 9.1359 5.98718 10.1326 6.57174 10.8885C7.15473 11.6423 8.00575 12.2104 8.99994 12.2104V11.2104ZM6.62531 8.14996C6.62531 6.6424 7.73052 5.5 8.99994 5.5V4.5C7.09412 4.5 5.62531 6.17817 5.62531 8.14996H6.62531ZM3.50619 16.3079C3.4591 16.9092 3.68396 17.5474 4.21873 17.9114L4.78144 17.0848C4.60398 16.964 4.4778 16.7095 4.50314 16.386L3.50619 16.3079ZM4.50314 16.386C4.54693 15.8269 4.72803 15.2503 4.92315 14.7742L3.99784 14.3949C3.78293 14.9194 3.56132 15.6041 3.50619 16.3079L4.50314 16.386ZM4.92315 14.7742C5.19469 14.1116 5.27724 13.8862 5.63085 13.4965L4.89032 12.8245C4.40345 13.361 4.26466 13.7439 3.99784 14.3949L4.92315 14.7742ZM8.99994 5.5C9.1386 5.5 9.27409 5.51322 9.40562 5.53851L9.59438 4.55648C9.4011 4.51933 9.20241 4.5 8.99994 4.5V5.5ZM9.38134 11.164C9.25642 11.1946 9.12915 11.2104 8.99994 11.2104V12.2104C9.21186 12.2104 9.41877 12.1843 9.61866 12.1355L9.38134 11.164ZM6.1611 17.4573C5.43358 17.4051 5.0871 17.2928 4.78144 17.0848L4.21873 17.9114C4.73175 18.2606 5.27933 18.3966 6.08951 18.4547L6.1611 17.4573ZM7.98361 12.8796C7.74328 12.7765 7.55289 12.6806 7.29998 12.5671C7.06993 12.4639 6.81755 12.3606 6.55856 12.301C6.29528 12.2405 6.00464 12.2201 5.70503 12.3016C5.40147 12.3842 5.13038 12.56 4.89032 12.8245L5.63085 13.4965C5.76395 13.3499 5.87621 13.2914 5.96751 13.2666C6.06277 13.2406 6.17851 13.2397 6.33445 13.2756C6.49468 13.3125 6.67437 13.3825 6.89055 13.4795C7.08386 13.5662 7.35385 13.6976 7.58938 13.7986L7.98361 12.8796Z" fill="white"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="26" height="130" viewBox="0 0 26 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#4F4F4F"/>
+<path d="M0 0H3.69231L22.4805 30.0683C23.4735 31.6574 24 33.4935 24 35.3674V94.6326C24 96.5064 23.4735 98.3426 22.4805 99.9317L3.69231 130H0V0Z" fill="#333333"/>
+<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#333333"/>
+<rect x="1" width="4" height="2" fill="#333333"/>
+<rect x="1" y="128" width="4" height="2" fill="#333333"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="26" height="130" viewBox="0 0 26 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#4F4F4F"/>
+<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#4F4F4F"/>
+<rect x="1" width="4" height="2" fill="#4F4F4F"/>
+<rect x="1" y="128" width="4" height="2" fill="#4F4F4F"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="26" height="130" viewBox="0 0 26 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#4F4F4F"/>
+<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#333333"/>
+<rect x="1" width="4" height="2" fill="#333333"/>
+<rect x="1" y="128" width="4" height="2" fill="#333333"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="128" viewBox="0 0 24 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H3.69231L22.4433 29.547C23.4601 31.1492 24 33.0076 24 34.9053V93.0947C24 94.9924 23.4601 96.8508 22.4433 98.453L3.69231 128H0V0Z" fill="#333333"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17L17 12L12 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 22L7 12L7 2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,135 @@
+import "./toolbar.css";
+import React, { useState, useEffect, useCallback } from "react";
+import { UserList } from "../UserList/UserList";
+import { FullscreenButton } from "../ui/FullscreenButton/FullscreenButton";
+import { PopupShare } from "../PopupShare/PopupShare";
+import { ExitPopup } from "../ExitPopup/ExitPopup";
+import { ControlPanel } from "../ControlPanel/ControlPanel";
+import { AnimatePresence, motion } from "framer-motion";
+import { sidebarVariants, popupAnimation } from "../../utils/animationProps";
+
+
+type link = {
+  id: string;
+};
+const userLocal = {
+  id: Math.floor(Math.random() * 100),
+};
+
+export const Sidebar: React.FC<any> = ({
+  closeStream,
+  data,
+}) => {
+  const [open, setOpen] = useState(true);
+  const [popup, setPopup] = useState({
+    popup1: false,
+    popup2: false,
+  });
+
+
+
+  const [selected, setSelected] = useState(false);
+  const [icon, setIcon] = useState("");
+
+  const [isMuted, setMuted] = useState(true);
+
+
+  const handleMuteClick = () => {
+    setMuted((prev) => !prev);
+  };
+
+
+  function handleClosePopups() {
+    setPopup({
+      popup1: false,
+      popup2: false,
+    });
+  }
+
+  function handleOpenSharePopup() {
+    setPopup({
+      popup1: true,
+      popup2: false,
+    });
+  }
+
+  function handleOpenExitPopup() {
+    setPopup({
+      popup1: false,
+      popup2: true,
+    });
+  }
+
+  function closeSideBar() {
+    setOpen((prev) => !prev);
+    setSelected(false);
+  }
+
+
+  useEffect(() => () => unmountComponent(), []);
+
+  function unmountComponent() {
+    setOpen(false);
+    setPopup({
+      popup1: false,
+      popup2: false,
+    });
+  }
+
+
+
+  return (
+    <div>
+      <motion.div
+        animate={open ? "open" : "closed"}
+        variants={sidebarVariants}
+        className="toolbar-container"
+      >
+        <div className="toolbar-field">
+          <div className="toolbar-field-part">
+            <FullscreenButton></FullscreenButton>
+            <UserList
+              selected={selected}
+              setSelected={setSelected}
+            ></UserList>
+          </div>
+          <ControlPanel
+            handleOpenSharePopup={handleOpenSharePopup}
+            handleOpenExitPopup={handleOpenExitPopup}
+          ></ControlPanel>
+        </div>
+        <div onClick={closeSideBar} className="toolbar-open-button">
+          <span className="toolbar-open-button-icon"></span>
+        </div>
+      </motion.div>
+      <AnimatePresence>
+        {popup.popup1 && (
+          <motion.div
+            key={1}
+            variants={popupAnimation}
+            initial={"hidden"}
+            animate={"show"}
+            exit={"hidden"}
+          >
+            <PopupShare data={data} setClose={handleClosePopups}></PopupShare>
+          </motion.div>
+        )}
+
+        {popup.popup2 && (
+          <motion.div
+            key={2}
+            variants={popupAnimation}
+            initial={"hidden"}
+            animate={"show"}
+            exit={"hidden"}
+          >
+            <ExitPopup
+              onExit={closeStream}
+              setClose={handleClosePopups}
+            ></ExitPopup>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
@@ -0,0 +1,655 @@
+.toolbar-container {
+  display: flex;
+  position: relative;
+  height: 100vh;
+  /* width: 74px; */
+  width: 64px;
+  padding: 0;
+  margin: 0;
+  /* transform: translateX(-60px); */
+
+  border-right: 1px solid #4f4f4f;
+  background: #333333;
+  box-sizing: border-box;
+}
+
+.toolbar-confirm-block {
+  display: flex;
+  gap: 8px;
+}
+
+.mobile-users-part-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 24px;
+}
+
+.toolbar-field {
+  width: 60px;
+  background: #333333;
+  padding: 14px 15px;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbar-field-part {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toolbar-button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toolbar-button-container-border-line {
+  width: 100%;
+  height: 1px;
+  background-color: #4f4f4f;
+}
+
+.toolbar-open-button {
+  position: absolute;
+  top: calc((100% - 128px) / 2);
+  left: calc(100% - 7px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 32px;
+  height: 128px;
+  border: none;
+  background: url("openToolbarBackIcon.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+
+  /* background-color: #2F80ED; */
+
+  cursor: pointer;
+}
+
+.toolbar-open-button-icon {
+  width: 24px;
+  height: 24px;
+  background: url("pointerIcon.svg") 50% 50% no-repeat;
+}
+
+.toolbar-container.opened .toolbar-open-button-icon {
+  background: url("closeToolbarIcon.svg") 50% 50% no-repeat;
+}
+
+.toolbar-button-area-container {
+  position: relative;
+}
+
+.toolbar-button-area {
+  position: relative;
+  display: flex;
+  /* background-color: #333333; */
+  /* border-top-left-radius: 50px solid #4f4f4f; */
+}
+
+.toolbar-button-area.hidden {
+  visibility: hidden;
+}
+
+.user-button-admin {
+  background: #2f80ed;
+}
+
+.user-button-you {
+  background: #219653;
+}
+
+.user-button-default {
+  background-color: #4f4f4f;
+}
+
+.user-button {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50px;
+  background-size: 100% 100%;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  justify-content: center;
+  line-height: 17px;
+  padding: 0px;
+}
+
+.toolbar-button {
+  background-color: #4f4f4f;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50px;
+  background-size: 100% 100%;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  justify-content: center;
+  line-height: 17px;
+  padding: 0px;
+}
+
+.user-icon {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50px;
+  background-size: 100% 100%;
+  background-color: #4f4f4f;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  justify-content: center;
+  line-height: 17px;
+  padding: 0px;
+}
+
+.toolbar-button_exit {
+  background: #eb5757;
+}
+
+.language-caption {
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.toolbar-icon {
+  object-fit: cover;
+  width: 45%;
+}
+
+.empty__block {
+  display: none;
+}
+
+.toolbar-disabled {
+  position: absolute;
+  width: 55%;
+  left: 25%;
+}
+
+.toolbar-button:hover {
+  opacity: 0.7;
+}
+
+.toolbar-open-add-button-container {
+  position: absolute;
+  left: -9px;
+  top: -9px;
+  display: flex;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 50px;
+  background: #333333;
+  border: 1px solid #4f4f4f;
+  gap: 8px;
+  z-index: 99;
+}
+
+.toolbar-open-add-button-container.show {
+  visibility: visible;
+}
+
+.toolbar-button-add-buttons {
+  background-color: #333333;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  display: flex;
+}
+
+.toolbar-button-description-container {
+  margin-left: 2px;
+  opacity: 0;
+  position: absolute;
+  left: 100%;
+  height: 24px;
+  top: calc(50% - 12px);
+  /* background-color: #27AE60; */
+  transition: 0.3s;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  /* width: auto; */
+  box-sizing: content-box;
+}
+
+.toolbar-button-description-rectangle {
+  /* display: inline-block; */
+  white-space: nowrap;
+  /* flex-shrink: 0; */
+  background-color: #333333;
+  height: 24px;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  border: 1px solid #4f4f4f;
+  border-left: none;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px 0 8px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+}
+
+.toolbar-button-description-triangle {
+  display: flex;
+  width: 18px;
+  height: 26px;
+  background-color: #eb5757;
+  background: url("icons/newCaptTriangleIcon.svg");
+}
+
+.user-control-popup {
+  border-radius: 50px;
+  width: 40px;
+  height: 40px;
+}
+
+.toolbar-button.notification::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50px;
+  background-color: #f2994a;
+}
+
+.toolbar-button.fullscreen.on {
+  background: url("./icons/openFullscreenIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.fullscreen {
+  background: url("./icons/closeFullscreenIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.user {
+  background: url("icons/userIcon.svg") 50% 50% no-repeat;
+}
+
+.toolbar-button.admin {
+  background-color: #2f80ed;
+}
+
+.toolbar-button.self {
+  background-color: #27ae60;
+}
+
+.toolbar-button.guest {
+  background-color: #9b51e0;
+}
+
+.toolbar-button.users {
+  background: url("./icons/usersIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.micro {
+  background: url("./icons/microOffIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.micro.on {
+  background: url("./icons/microOnIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.control {
+  background: url("./icons/constrolOffIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.control.on {
+  background: url("./icons/constrolOnIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.other {
+  background: url("./icons/othertIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.sound {
+  background: url("./icons/soundOffIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.sound.on {
+  background: url("./icons/soundOnIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.exit {
+  background: url("./icons/exitIcon.svg") 50% 50% no-repeat;
+  background-color: #eb5757;
+}
+
+.toolbar-button.copy {
+  background: url("./icons/copyIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.share {
+  background: url("./icons/shareIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.language {
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.language.ru {
+  background: url("./icons/ruIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-button.language.en {
+  background: url("./icons/enIcon.svg") 50% 50% no-repeat;
+  background-color: #4f4f4f;
+}
+
+.toolbar-language-popup {
+  position: absolute;
+  left: -9px;
+  top: -9px;
+  display: flex;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 50px;
+  background: #333333;
+  border: 1px solid #4f4f4f;
+  gap: 8px;
+  z-index: 99;
+}
+
+.toolbar-button.selected.selected {
+  background-color: #ce56c2;
+}
+
+.toolbar-button.large,
+.toolbar-button.control.large {
+  width: 196px;
+  background-image: none;
+}
+
+.toolbar-button.medium {
+  width: 94px;
+  background-image: none;
+}
+
+.toolbar-button-large-view,
+.toolbar-button-medium-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+}
+
+.toolbar-notification {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  left: 28px;
+  top: 0px;
+  background: #f2994a;
+  border-radius: 50%;
+}
+
+.toolbar-button.large.control .toolbar-button-large-view-icon {
+  width: 24px;
+  height: 24px;
+  background: url("icons/constrolOffIcon.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+}
+
+.toolbar-button.large.control.on .toolbar-button-large-view-icon {
+  width: 24px;
+  height: 24px;
+  background: url("icons/constrolOnIcon.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+}
+
+.toolbar-button-large-view-title,
+.toolbar-button-medium-view-title {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 130%;
+  color: #ffffff;
+}
+
+.toolbar-button.yes {
+  padding-left: 24.5px;
+}
+
+.toolbar-button.yes .toolbar-button-medium-view {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.toolbar-button.no {
+  padding-left: 16px;
+}
+
+.toolbar-button.no .toolbar-button-medium-view {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.toolbar-button.yes .toolbar-button-medium-view-icon {
+  width: 24px;
+  height: 24px;
+  background: url("icons/constrolOnIcon.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+}
+
+.toolbar-button.yes {
+  background-color: #219653;
+}
+
+.toolbar-button.yes:hover {
+  opacity: 1;
+  background-color: #2ac06a;
+}
+
+.toolbar-button.no .toolbar-button-medium-view-icon {
+  width: 24px;
+  height: 24px;
+  background: url("icons/constrolOffIcon.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+}
+
+.toolbar-button.no {
+  background-color: #eb5757;
+}
+
+.toolbar-button.no:hover {
+  opacity: 1;
+  background-color: #f08484;
+}
+
+.control-button {
+  box-sizing: border-box;
+  display: flex;
+  width: 196px;
+  height: 40px;
+  border-radius: 50px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  background: #4f4f4f;
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 17px;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+}
+
+.control-button.waiting {
+  background: #f2994a;
+}
+
+.control-button:hover {
+  opacity: 0.7;
+}
+
+.control-button-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.show-toolbar-enter {
+  transform: translateX(-60px);
+}
+
+.show-toolbar-enter-done {
+  transform: translateX(0px);
+}
+
+.show-toolbar-enter-active {
+  transform: translateX(0px);
+  transition: 0.3s;
+}
+
+.show-toolbar-exit {
+  transform: translateX(0);
+}
+
+.show-toolbar-exit-active {
+  transform: translateX(-60px);
+  transition: 0.3s;
+}
+
+.show-toolbar-exit-done {
+  transform: translateX(-60px);
+}
+
+.show-add-buttons-enter {
+  opacity: 0;
+}
+
+.show-add-buttons-enter-active {
+  opacity: 1;
+  transition: 0.3s;
+}
+
+.show-add-buttons-exit {
+  opacity: 1;
+}
+
+.show-add-buttons-exit-active {
+  opacity: 0;
+  transition: 0.3s;
+}
+
+@media screen and (max-height: 700px) {
+  .toolbar-field {
+    padding: 20px 14px;
+  }
+
+  .toolbar-button {
+    width: 44px;
+    height: 44px;
+  }
+
+  .toolbar-button:hover {
+    opacity: 1;
+  }
+
+  .toolbar-button:active {
+    opacity: 0.7;
+  }
+
+  .control-button {
+    height: 44px;
+  }
+
+  .show-toolbar-enter {
+    transform: translateX(-60px);
+  }
+
+  .show-toolbar-enter-done {
+    transform: translateX(0px);
+  }
+
+  .show-toolbar-enter-active {
+    transform: translateX(0px);
+    transition: 0.3s;
+  }
+
+  .show-toolbar-exit {
+    transform: translateX(0);
+  }
+
+  .show-toolbar-exit-active {
+    transform: translateX(-60px);
+    transition: 0.3s;
+  }
+
+  .show-toolbar-exit-done {
+    transform: translateX(-60px);
+  }
+
+  .show-toolbar-enter .toolbar-field {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .show-toolbar-enter-done .toolbar-field {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  .show-toolbar-enter-active .toolbar-field {
+    opacity: 1;
+    pointer-events: all;
+    transition: 0.3s;
+  }
+
+  .show-toolbar-exit-active .toolbar-field {
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.3s;
+  }
+
+  .show-toolbar-exit-done .toolbar-field {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { Button } from "../button/button";
+import control from "../../../images/icons/control.svg";
+import { THOC } from "../../../utils/types";
+
+
+export const ControlButton: React.FC<THOC> = ({ onClick }) => {
+  const [active, setActive] = useState(false);
+  const button = {
+    icon: control,
+    active: "Запрет управления",
+    inactive: "Запрос управления",
+    type: "control",
+  };
+
+  function handleClick() {
+    onClick()
+    setActive(prev => !prev)
+  }
+
+  return <div className="toolbar-button-area">
+    <Button button={button} active={active} onClick={handleClick}></Button>
+  </div>
+};
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Button } from "../button/button";
+import exit from "../../../images/icons/exit.svg";
+import { THOC } from "../../../utils/types";
+
+export const ExitButton: React.FC<THOC> = ({ onClick }) => {
+  const [active, setActive] = useState(false);
+  const button = {
+    icon: exit,
+    active: "Завершить презентацию",
+    inactive: "Завершить презентацию",
+    type: "exit",
+  };
+
+  function handleClick() {
+    console.log("click");
+    setActive((prev) => !prev);
+    onClick()
+  }
+
+  return (
+    <div className="toolbar-button-area">
+      <Button  button={button} onClick={handleClick}></Button>
+    </div>
+  );
+};
@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+import { Button } from "../button/button";
+import fullscreen from "../../../images/icons/fullscreen.svg";
+import fullscreenOff from "../../../images/icons/fullscreenOff.svg";
+
+
+export const FullscreenButton = ({ }) => {
+  const [active, setActive] = useState(false);
+  const [button, setButton] = useState({
+    icon: fullscreen,
+    active: "Развернуть",
+    inactive: "Свернуть",
+    type: "fullscreen",
+
+  })
+
+  function handleClick() {
+    setActive((prev) => !prev);
+    setButton({
+      icon: active ? fullscreen : fullscreenOff,
+      active: "Развернуть",
+      inactive: "Свернуть",
+      type: "fullscreen",
+    })
+
+    if (active) {
+      document.exitFullscreen()
+    } else {
+      document.body.requestFullscreen()
+    }
+  }
+
+
+  useEffect(() => {
+    return () => {
+      document.exitFullscreen()
+    }
+  }, [])
+
+  return (
+    <div className="toolbar-button-area">
+      <Button button={button} active={active} onClick={handleClick}></Button>
+    </div>
+  );
+};
--- a/Show More
+++ b/Show More