dd

src/Components/Header/index.jsx

@@ -13,7 +13,7 @@ const Header = () => {
         <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>
+                <button className={styles.header__button}>ВХОД</button>
             </header>
         </div>
     )

src/Components/Header/style.module.scss

@@ -12,9 +12,11 @@
         justify-content: center;
         width: 100%;
         height: 150px;
-        position: absolute;
+        position: fixed;
         top: 0px;
+        background-color: #fff;
         left: 0px;
+        z-index: 10;
     }
     &__logo {
         cursor: pointer;
@@ -23,7 +25,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: 100px;
+        border-radius: 10px;
         background: #FFED00;
         width: 200px;
         height: 42px;

src/Components/MeetAuthPage/index.jsx

@@ -7,13 +7,28 @@ import avatar from '../../img/MeetPage/avatar.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';
 const MeetPage = () => {
 
+    // const textAreaRef = useRef<HTMLTextAreaElement>(null);
+    // const [text, setText] = useState("");
+    // const [textAreaHeight, setTextAreaHeight] = useState("auto");
+    // const [parentHeight, setParentHeight] = useState("auto");
+  
+    // const parentStyle= {
+    //   minHeight: parentHeight,
+    // };
+  
+    // const textAreaStyle= {
+    //   height: textAreaHeight,
+    // };
+
+  
+
     return (
         <>
             <Header></Header>
@@ -73,6 +88,42 @@ const MeetPage = () => {
                     </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>
+                            <div style={parentStyle}>
+                            <textarea
+                            ref={textAreaRef}
+                            style={textAreaStyle}
+                            rows={1}
+                            />
+                        </div>
+                        </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>
+                </div>
+                
             </section>
             <section className={styles.someMeetings}>
             <div className={styles.someMeetings__title}>Еще мероприятия</div>

src/Components/MeetAuthPage/style.module.scss

@@ -107,7 +107,7 @@
         display: flex;
         text-align: left;
         color: rgba(0, 0, 0, 0.90);
-        font-family: Inter;
+        font-family: Montserrat;
         font-size: 24px;
         font-style: normal;
         font-weight: 400;
@@ -286,3 +286,86 @@
         }
     }
 }
+
+.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;
+    &_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;
+   }
+}