fdddd

src/App.jsx

@@ -12,6 +12,8 @@ import HomePage from "./Components/HomePage/index.jsx";
 import MeetPage from "./Components/MeetPage/index.jsx";
 import MeetAuthPage from "./Components/MeetAuthPage/index.jsx";
 import ProfilePage from './Components/profilePage/index.jsx';
+import MeetAuthPageAdmin from './Components/MeetAuthPageAdmin/index.jsx'
+import HomeAuthPageAdmin from './Components/HomePageAdmin/index.jsx'
 
 
 function App() {
@@ -27,6 +29,8 @@ function App() {
           <Route path="/firstMeet" element={<MeetPage />}/>
           <Route path="/firstMeetAuth" element={<MeetAuthPage />}/>
           <Route path='/profile' element={<ProfilePage />}/>
+          <Route path='/adminMeets' element={<MeetAuthPageAdmin/>}/>
+          <Route path='/admin' element={<HomeAuthPageAdmin/>}/>
         </Routes>
       </BrowserRouter>
     </>

src/Components/Header/index.jsx

@@ -1,21 +1,45 @@
 
 import styles from './style.module.scss';
-import logo from '../../img/headerImg/OgettoLogo.png';
+import logo from '../../img/headerImg/header.png';
+import google from '../../img/headerImg/google.png';
+import avatar from '../../img/headerImg/avatar.png';
+import icon from '../../img/headerImg/Icon.png';
 import { useNavigate } from "react-router-dom";
 
+import { useState } from 'react';
+
 const Header = () => {
     const navigate = useNavigate();
     const handleHome = () => {
         navigate('/');
     }
+    const isAuth = useState(true)[0];
+    console.log(isAuth)
+
 
     return (
-        <div className={styles.header__container}>
+        <>
+            {(isAuth ? (
+            <div className={styles.header__container}>
             <header className={styles.header}>
                 <div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
-                <button className={styles.header__button}>ВХОД</button>
+                <div className={styles.header_img_container}>  <img className={styles.header_img} src={icon}></img> <img className={styles.header_img} src={avatar}></img></div>
             </header>
         </div>
+        ) :
+        (
+            <div className={styles.header__container}>
+                <header className={styles.header}>
+                    <div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
+                    <button className={styles.header__button}>ВХОД <img className={styles.header__button_img} src={google}></img></button>
+                </header>
+            </div>
+        ))
+            }
+       
+
+        </>
+        
     )
 
 }

src/Components/Header/style.module.scss

@@ -35,5 +35,12 @@
         font-style: normal;
         font-weight: 400;
         line-height: normal;
+        position: relative;
+        &_img {
+
+            width: 55px;
+            margin-right: 40px;
+            height: 55px;
+        }
     }
 }

src/Components/HomePageAdmin/index.jsx

@@ -0,0 +1,80 @@
+import Header from "../Header";
+import styles from "./style.module.scss";
+import TableMeets from '../TableMeets/TableMeets'
+import Home from "../Home/Home";
+// import FetchUtils from "../utils/FetchUtils";
+import EditForm from "../edit/EditForm";
+import PostForm from "../post/PostForm";
+
+const APIURL = ''
+
+// const events = [
+//     {
+//       id: 1,
+//       date: '10.10.2022',
+//       time: '14:00',
+//       title: 'Мероприятие 1',
+//       speaker: 'Спикер 1',
+//       avatar: 'speaker1.jpg',
+//       description: 'Описание мероприятия 1',
+//       isExpanded: true,
+//     },
+//     {
+//       id: 2,
+//       date: '11.10.2022',
+//       time: '15:30',
+//       title: 'Мероприятие 2',
+//       speaker: 'Спикер 2',
+//       avatar: 'speaker2.jpg',
+//       description: 'Описание мероприятия 2',
+//       isExpanded: true,
+//     },
+//     // Добавьте другие мероприятия сюда
+//   ];
+const HomePage = () => {
+    return (
+    <>
+
+        <Header></Header>
+        <section className={styles.muza__container}>
+           
+            
+        </section>
+        <section className={styles.meeting__container}>
+            <input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
+            <div className={styles.container}>
+                <div className={styles.select__container}>
+                    <select className={styles.select} name="time__meeting">
+                        <option value="">Время мироприятия</option>
+                    </select>
+                    <select className={styles.select} name="type__meeting">
+                        <option value="">Тип мероприятия</option>
+                    </select>
+                </div>
+            </div>
+            <div className={styles.NewContainer}>
+                <div className={styles.search_container}>
+                    <div className={styles.search__descr}>100 мероприятий</div>
+                    <select className={styles.select} name="type__meeting">
+                        <option value="">Тип мероприятия</option>
+                    </select>
+                </div>
+            </div>
+            <div className={styles.cards__container}>
+                <div className={styles.card}></div>
+            </div>
+            <Home></Home>
+            {/* <FetchUtils></FetchUtils> */}
+            {/* <PostForm /> */}
+            {/* <EditForm /> */}
+        </section>
+        
+
+
+        
+    </>
+    
+
+    )
+}
+export default HomePage;

src/Components/HomePageAdmin/style.module.scss

@@ -0,0 +1,89 @@
+
+
+.container {
+    width: 100%;
+}
+.muza {
+    &__container {
+        height: 700px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+    }
+   
+    &__title {
+        margin-top: 150px;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 143.016px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        text-align: left;
+        display: flex;
+        width: 90%;
+
+    }
+    &__descr {
+        &_container {
+            display: flex;
+            justify-content: flex-end;
+        }
+        margin-top: 50px;
+        margin-left: 70px;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 46px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        text-align: left;
+        display: flex;
+        width: 60%;
+
+    }
+}
+.meeting {
+   &__container {
+    height: 1400px;
+   } 
+   &__inputs {
+        width: 90%;
+        height: 46px;
+        border-radius: 10px;
+        border: 1px solid #000;
+        padding-left: 40px;
+   }
+   
+}
+.container {
+    display: flex;
+    justify-content: center;
+    
+}
+.select {
+    margin-right: 50px;
+    height: 35px;
+    border-radius: 10px;
+    border: 1px solid var(--gray_stroke, #D0D2D8);
+    width: 200px;
+    &__container {
+        display: flex;
+        width: 93%;
+        margin-top: 30px;
+    }
+   }
+.NewContainer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 30px;
+}
+.search_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.search__descr {
+    margin-right: 25px;
+}

src/Components/MeetAuthPageAdmin/index.jsx

@@ -0,0 +1,263 @@
+import Header from "../Header";
+import styles from './style.module.scss';
+import clock from '../../img/MeetPage/Clock.png';
+import globe from '../../img/MeetPage/Globe.png';
+import avatar from '../../img/MeetPage/avatar.png';
+import like from '../../img/MeetPage/Facebook.png';
+import Card from "../Card";
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+// import { useState, CSSProperties, useEffect, useRef } from "react";
+import newAvatar from '../../img/MeetPage/newAvatar.png';
+import vk from '../../img/MeetPage/Vk.png';
+import tg from '../../img/MeetPage/Telegram.png';
+import book from '../../img/MeetPage/Book.png';
+import * as React from 'react';
+import Modal from '@mui/material/Modal';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: "56%",
+  height: "80vh",
+  bgcolor: 'background.paper',
+  borderRadius: '25px',
+  boxShadow: 24,
+  p: 4,
+};
+const MeetPage = () => {
+
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+  
+
+    return (
+        <>
+         
+            <Header></Header>
+
+            <section className={styles.meets}>
+                <div className={styles.meets__mainInfo_container}>
+                    <span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
+                    <span className={styles.meets__mainInfo_type}>Психология</span>
+                    <div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
+                    <div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
+                </div>
+                <div className={styles.meets__img}></div>
+                
+            </section>
+            <div className={styles.container}>
+              
+                <div className={styles.meets__otziv_container}>
+                    <div className={styles.newMeeting__container}>
+                        <button className={styles.newMeeting__button}>ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</button>
+                        <a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
+                        <a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
+                    </div>
+                    <div onClick={handleOpen} className={styles.meets__otziv}>
+                        <span className={styles.meets__otziv_title}>Оставить вопрос</span>
+                        Оставьте вопрос первым
+                    </div>
+                    
+                </div>
+            </div>
+           
+            <section className={styles.aboutMeet}>
+                <div className={styles.aboutMeet__title}>О мероприятии</div>
+                <div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
+            </section>
+            <section className={styles.expert}>
+                <div className={styles.expert__title}>Специалист</div>
+                <div className={styles.newContainer}>
+                    <div className={styles.expert__container}>
+                        <div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
+
+                        <div className={styles.expert__descr_container}>
+                            <div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
+                            <div className={styles.expert__descr_speciality}>Психолог, таролог</div>
+                            <div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
+                            <a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
+                        </div>
+
+                    </div>     
+                    <div className={styles.container__links}>
+                        <div className={styles.links__title}>Ссылки на материалы специалиста</div>
+                        <div className={styles.links__img_container}>
+                            <a href="#"><img src={vk} className={styles.links__img}></img></a>
+                            <a href="#"><img src={tg} className={styles.links__img}></img></a>
+                            <a href="#"><img src={book} className={styles.links__img}></img></a>
+                        </div>
+
+                    </div>
+                </div>
+                
+            </section>
+            <section className={styles.comments}>
+                <div className={styles.comments__title}>Комментарии</div>
+                <div className={styles.newInputContainer}>
+                    <div className={styles.comments__number}>3 КОММЕНТАРИЯ</div>
+                    <div className={styles.comments__input_container}>
+                        <div className={styles.comments__input_img_container}>
+                            <img className={styles.comments__input_img} src={newAvatar} alt='avatar'></img>
+                            <textarea placeholder="Дмитрий Кирканов" className={styles.comments__input}></textarea>
+                        </div>
+                        <div className={styles.comments__button_container}>
+                            <button className={styles.comments__button}>ОТПРАВИТЬ</button>
+                        </div>
+                    </div>
+                    <div className={styles.comments__all_container}>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+            </section>
+            <section className={styles.someMeetings}>
+            <div className={styles.someMeetings__title}>Еще мероприятия</div>
+            <Box sx={{ flexGrow: 1 }}>
+                <Grid container spacing={1}>
+                <Grid item xs={6}  md={4} lg={3} >
+                    <Card></Card>
+                </Grid>
+                <Grid item xs={6}  md={4} lg={3} >
+                    <Card></Card>
+                </Grid>
+                <Grid item xs={6} md={4} lg={3} >
+                    <Card></Card>
+                </Grid>
+                <Grid item xs={6}  md={4} lg={3} >
+                    <Card></Card>
+                </Grid>
+                
+                </Grid>
+            </Box>
+            </section>
+            <div>
+     
+                    <Modal
+                        open={open}
+                        onClose={handleClose}
+                        aria-labelledby="modal-modal-title"
+                        aria-describedby="modal-modal-description"
+                    >
+                        <Box sx={style}>
+                        <div className={styles.modal__title}>Вопросы</div>
+                        <div onClick={handleClose} className={styles.modal__close}><div className={styles.modal__close_img}>+</div></div>
+                        <div className={styles.modal__line}></div>
+                        <div className={styles.modal__question_number}>Всего  <span>1</span></div>
+                        <div className={styles.modal__question_container}>
+                            <div className={styles.modal__question_containerSecond}>
+                                <div className={styles.modal__question_user}>
+                                    <div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
+                                    <div className={styles.modal__question_user_descr}>Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями. </div>
+                                    <div className={styles.modal__question_time_container}>
+                                        <div className={styles.modal__question_time}>4 мая 1990, 00:00</div>
+                                        <div className={styles.modal__question_like_container}><img src={like} alt='like' className={styles.modal__question_like_container}></img> <span className={styles.modal__question_like}>0</span></div>
+                                    </div>
+                                    
+                                </div>
+                            </div>
+                            <div className={styles.modal__question_containerThird}>
+                                <div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
+                                <textarea placeholder="Дмитрий Кирканов" className={styles.modal__question_input}></textarea>
+                                <div className={styles.modal__question_button_container}>
+                                    <button className={styles.modal__question_button + ' ' + styles.yellow}>Задать вопрос</button>
+                                    <button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
+                                </div>
+                            </div>
+                        </div>
+                        </Box>
+                    </Modal>
+                    </div>
+        </>
+        
+    )
+
+
+}
+export default MeetPage;

src/Components/MeetAuthPageAdmin/style.module.scss

@@ -0,0 +1,595 @@
+.meets {
+    margin-top: 150px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    &__img {
+        width: 44%;
+        height: 300px;
+        background-color: #D9D9D9;
+    }
+    &__mainInfo {
+        &_container {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            align-content: start;
+        }
+        &_descr {
+            color: #000;
+            font-family: Montserrat;
+            font-size: 30px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: normal;
+            text-align: left;
+        }
+        &_type {
+            display: flex;
+            margin-top: 25px;
+            border-radius: 10px;
+            border: 1px solid var(--gray_text, #888);
+            width: 110px;
+            height: 35px;
+            justify-content: center;
+            align-items: center;
+            color: var(--gray_text, #888);
+            font-family: Montserrat;
+            font-size: 15px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+        &_status {
+            margin-top: 40px;
+
+            display: flex;
+        }
+        &_time {
+            margin-top: 40px;
+   
+            display: flex;
+        }
+        &_status_img {
+            height: 26px;
+            width: 30px;
+            margin-right: 12px;
+        }
+    }
+    &__otziv {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 300px;
+        width: 44%;
+        border: 1px solid var(--gray_stroke, #D0D2D8);
+        margin-top: 50px;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        &_title {
+            color: #000;
+            font-family: Montserrat;
+            font-size: 25px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            position: absolute;
+            left: 10px;
+            top: 4px;
+        }
+        &_container {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    
+}
+.aboutMeet {
+    margin-top: 100px;
+    display: flex;
+    flex-direction: column;
+    &__title {
+        display: flex;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 56px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    &__descr {
+        margin-top: 60px;
+        display: flex;
+        text-align: left;
+        color: rgba(0, 0, 0, 0.90);
+        font-family: Montserrat;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 110%; /* 27.6px */
+    }
+
+}
+.expert {
+
+    display: flex;
+    flex-direction: column;
+    margin-top: 200px;
+    &__title {
+        display: flex;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 56px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    &__img {
+        border-radius: 10000px;
+    }
+   
+
+}
+.expert {
+
+
+    &__container {
+        margin-top: 60px;
+        display: flex;
+
+    }
+    &__img {
+        width: 200px;
+        height: 200px;
+        &_container {
+            margin-right: 50px;
+        }
+        
+    }
+    &__descr {
+        
+
+
+        &_container {
+            display: flex;
+            flex-direction: column;
+            text-align: left;
+
+            justify-content: center;
+        }
+        &_fullname {
+            color: #000;
+            font-family: Montserrat;
+            font-size: 36px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+        &_speciality {
+            color: #000;
+            font-family: Montserrat;
+            font-size: 32px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            margin-top: 6px;
+        }
+        &_phone {
+            color: #000;
+            font-family: Montserrat;
+            font-size: 22px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            margin-top: 16px;
+        }
+        &_email {
+            color: #2C41FF;
+            font-family: Montserrat;
+            font-size: 22px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            margin-top: 16px;
+        }
+    }
+}
+.someMeetings {
+
+    display: flex;
+    flex-direction: column;
+    margin-top: 200px;
+    &__title {
+        display: flex;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 56px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+
+}
+.cards_container {
+    display: flex;
+}
+.newMeeting {
+    &__container {
+        margin-top: 50px;
+        display: flex;
+        flex-direction: column;
+    }
+    &__button {
+        color: #000;
+        font-family: Montserrat;
+        font-size: 22px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        border-radius: 10px;
+        background: var(--yellow, #FFED00);
+        height: 80px;
+        width: 450px;
+    }
+    &__link {
+        margin-top: 30px;
+        color: #2C41FF;
+        font-family: Montserrat;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        text-align: left;
+    }
+    &__ling_video {
+        color: #000;
+        font-family: Montserrat;
+        font-size: 25px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-top: 140px;
+        text-align: left;
+    }
+}
+.newContainer {
+    display: flex;
+    justify-content: space-between;
+}
+.container__links {
+    width: 40%;
+}
+.links {
+
+    &__title {
+        margin-top: 128px;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        text-align: left;
+        padding-left: 5px;
+    }
+    &__img {
+        margin-right: 10px;
+
+        &_container {
+            margin-top: 45px;
+            display: flex;
+        }
+    }
+}
+
+.expert {
+
+    display: flex;
+    flex-direction: column;
+    margin-top: 200px;
+    &__title {
+        display: flex;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 56px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    &__img {
+        border-radius: 10000px;
+    }
+   
+
+}
+
+.yellowSpan {
+    color: #FD0
+}
+.comments {
+    display: flex;
+    flex-direction: column;
+    margin-top: 200px;
+    &__title {
+        display: flex;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 56px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+   &__number {
+    margin-left: 3px;
+   }
+
+   &__input {
+    border-radius: 10px;
+    border: 1px solid var(--gray_stroke, #D0D2D8);
+    background: #FFF;
+    height: 200px;
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    padding-left: 20px;
+    text-align: start;
+    display: flex;
+    justify-content: start;
+    padding-left: 30px;
+    font-family: Montserrat;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 30px;
+    &_img {
+        height: 60px;
+        width: 60px;
+    }
+    &_container {
+        display: flex;
+        flex-direction: column;
+    }
+    &_img_container {
+        display: flex;
+        margin-top: 60px;
+    }
+    &_img {
+        margin-right: 50px;
+    }
+   }
+   .newInputContainer {
+    display: flex;
+    flex-direction: column;
+   }
+   &__number {
+    display: flex;
+    margin-top: 60px;
+    color: #000;
+    font-family: Montserrat;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+   }
+   &__button {
+    border-radius: 5.833px;
+    background: var(--yellow, #FD0);
+    width: 200px;
+    height: 45px;
+    margin-top: 35px;
+        &_container {
+            display: flex;
+            justify-content: flex-end;
+        }
+   }
+   &__all_container {
+    display: flex;
+    flex-direction: column;
+    height: 500px;
+    margin-top: 50px;
+    overflow-x: hidden;
+   }
+   
+}
+
+.oneComment {
+
+    &__container {
+        display: flex;
+        margin-top: 70px;
+    }
+    &__img {
+        margin-right: 50px;
+    }
+    &__descr {
+        color: #000;
+        font-family: Montserrat;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-top: 20px;
+        &_title {
+            color: #000;
+            font-family: Montserrat;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            margin-right: 12px;
+            &_container {
+                display: flex;
+
+            }
+        }
+        &_time {
+            color: var(--gray_text, #888);
+            font-family: Montserrat;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    }
+}
+.modal {
+    background-color: #fff;
+    position: absolute;
+    height: 400px;
+    width: 300px;
+    &__container {
+        position: absolute;
+        top: 0px;
+        height: 5000px;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.40);
+    }
+    &__title {
+        color: #000;
+        font-family: Montserrat;
+        font-size: 48px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    &__line {
+        height: 1px;
+        width: 100%;
+        stroke-width: 1px;
+        background-color: #D0D2D8;
+        width: 100%;
+        margin-top: 40px;
+    }
+    &__close {
+        cursor: pointer;
+        transform: rotate(-45deg);
+        position: absolute;
+        height: 96px;
+        height: 45px;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 58.625px;
+        font-style: normal;
+        font-weight: 200;
+        line-height: normal;
+        top: 0px;
+        right: 50px;
+    }
+    &__question {
+        &_number {
+            margin-top: 50px;
+            color: #000;
+            font-family: Montserrat;
+            font-size: 32px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: normal;
+            span {
+                color: #000;
+                font-family: Montserrat;
+                font-size: 32px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+            }
+        }
+        &_container {
+            margin-top: 60px;
+            display: flex;
+            justify-content: space-between;
+        }
+        &_containerSecond {
+            width: 48%;
+            height: 250px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+        &_user {
+            &_img {
+                margin-right: 25px;
+                &_container {
+                    display: flex;
+                    align-items:center;
+                    color: #000;
+                    font-family: Montserrat;
+                    font-size: 24px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                }
+            }
+            &_descr {
+                color: #000;
+                font-family: Montserrat;
+                font-size: 18px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+                margin-top: 25px;
+            }
+        }
+        &_time {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &_container {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-top: 20px;
+            }
+        }
+        &_like {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 5px 0 0 10px;
+            &_container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                
+            }
+        }
+        &_input {
+            margin-top: 40px;
+            border-radius: 10px;
+            border: 1px solid var(--gray_stroke, #D0D2D8);
+            width: 100%;
+            height: 235px;
+            padding-top: 20px;
+            padding-left: 10px;
+        }
+        &_containerThird {
+            margin-right: 3%;
+        }
+        &_button {
+            &_container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+}
+.yellow {
+    border-radius: 10px;
+    background-color: #FD0;
+    width: 190px;
+    height: 50px;
+    margin-right: 30px;
+}
+.gray {
+    border-radius: 10px;
+    background: var(--gray_stroke, #D0D2D8);
+    width: 140px;
+    height: 40px;
+}

src/Components/UserHeader/index.jsx

@@ -0,0 +1,22 @@
+
+import styles from './style.module.scss';
+import logo from '../../img/headerImg/OgettoLogo.png';
+import { useNavigate } from "react-router-dom";
+
+const Header = () => {
+    const navigate = useNavigate();
+    const handleHome = () => {
+        navigate('/');
+    }
+
+    return (
+        <div className={styles.header__container}>
+            <header className={styles.header}>
+                <div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
+                <button className={styles.header__button}>ВХОД</button>
+            </header>
+        </div>
+    )
+
+}
+export default Header;

src/Components/UserHeader/style.module.scss

@@ -0,0 +1,39 @@
+
+
+.header {
+    height: 75px;
+    width: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &__container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 150px;
+        position: fixed;
+        top: 0px;
+        background-color: #fff;
+        left: 0px;
+        z-index: 10;
+    }
+    &__logo {
+        cursor: pointer;
+    }
+    &__button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+        background: #FFED00;
+        width: 200px;
+        height: 42px;
+        color: #000;
+        font-family: Montserrat;
+        font-size: 25px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+}