dd

added create meets, check meets, edit meets [edit meets not stable]

package-lock.json

@@ -18,6 +18,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.21.1",
+        "sass": "^1.69.5",
         "styled-components": "^6.1.2"
       },
       "devDependencies": {
@@ -28,7 +29,6 @@
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
-        "sass": "^1.69.5",
         "vite": "^5.0.8"
       }
     },
@@ -1765,7 +1765,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1958,7 +1957,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1977,7 +1975,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -2084,7 +2081,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -2111,7 +2107,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2827,7 +2822,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2927,7 +2921,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -3185,8 +3178,7 @@
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
-      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
-      "dev": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -3292,7 +3284,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -3358,7 +3349,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3394,7 +3384,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -3427,7 +3416,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -3814,7 +3802,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4057,7 +4044,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -4236,7 +4222,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -4424,7 +4409,6 @@
       "version": "1.69.5",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
       "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
-      "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -4705,7 +4689,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },

package.json

@@ -20,6 +20,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
+    "sass": "^1.69.5",
     "styled-components": "^6.1.2"
   },
   "devDependencies": {
@@ -30,7 +31,6 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "sass": "^1.69.5",
     "vite": "^5.0.8"
   }
 }

src/App.css

@@ -1,5 +1,5 @@
 #root {
-  max-width: 1280px;
+  width: 79%;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

src/App.jsx

@@ -1,22 +1,29 @@
 
+import './App.css'
+import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
+// import TableMeets from './components/fetchUtils/TableMeets.jsx'
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import BeingPage from "./Components/BeingPage/index.jsx";
 import HomePage from "./Components/HomePage/index.jsx";
-import './App.css'
+import MeetPage from "./Components/MeetPage/index.jsx";
+import MeetAuthPage from "./Components/MeetAuthPage/index.jsx";
+
+
 
 function App() {
 
-
   return (
     <>
+      {/* <FetchUtils /> */}
+      
       <BrowserRouter>
         <Routes>
           <Route path="/being" element={<BeingPage />}/>
           <Route path="/" element={<HomePage />}/>
+          <Route path="/firstMeet" element={<MeetPage />}/>
+          <Route path="/firstMeetAuth" element={<MeetAuthPage />}/>
         </Routes>
       </BrowserRouter>
-      
-
     </>
   )
 }

src/Components/Card/index.jsx

@@ -0,0 +1,34 @@
+import './style.module.scss';
+
+
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+
+const httpApiMethods = new HttpApiMethods()
+function extractDateTime(dateString) {
+    const dateTime = new Date(dateString);
+    const date = dateTime.toLocaleDateString();
+    const time = dateTime.toLocaleTimeString();
+    
+    return { date, time };
+}
+
+
+
+const Card = (item) => {
+
+    console.log(item);
+    return (
+        <>
+            <div className='event_card' >
+                <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
+                    <div className="taggs">
+                        <div className='tagged'>{item.tags}</div>
+                        <div className="feautures">{item.type}</div>
+                    </div>
+                <h4 className="event-card__title">{item.title}</h4>
+                <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
+            </div>
+        </>
+    )
+}
+export default Card;

src/Components/Card/style.module.scss

@@ -0,0 +1,74 @@
+.event_card {
+    width: 292px;
+    height: 626px;
+    flex-shrink: 0;
+    margin-top: 100px;
+}
+
+.wrapp {
+    display: flex;
+    justify-content: flex-start;
+    /* max-width: 1521px; */
+}
+
+:root {
+    text-align: left;
+}
+
+.event-card_date {
+    color: var(--gray_text, #888);
+
+/* title */
+font-family: Montserrat;
+font-size: 22px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+}
+
+.event-card__photo {
+    width: 292px;
+    height: 340px;
+    flex-shrink: 0;
+background: #D9D9D9;
+margin-bottom: 26px;
+}
+
+.event-card_title {
+    color: #000;
+
+    font-family: Montserrat;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+.feautures {
+    
+display: flex;
+justify-content: center;
+font-family: Montserrat;
+align-items: center;
+font-size: 8px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+border-radius: 10px;
+background: #E7FFD2;
+height: 15px;
+padding: 10px;
+}
+
+.tagged {
+    display: inline-flex;
+padding: 10px;
+justify-content: center;
+align-items: center;
+gap: 10px;
+border-radius: 10px;
+border: 1px solid var(--gray_text, #888);
+}
+.taggs {
+    display: flex;
+    justify-content: space-between;
+}

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/HomePage/index.jsx

@@ -1,13 +1,82 @@
 import Header from "../Header";
 import styles from "./style.module.scss";
+import TableMeets from '../TableMeets/TableMeets'
+import Home from "../Home/Home";
+import FetchUtils from "../fetchUtils/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></section>
+        <Header></Header>
+        <section className={styles.muza__container}>
+            <div className={styles.muza__title}>МУЗА</div>
+            <div className={styles.muza__descr_container}>
+                <div className={styles.muza__descr}>Платформа для проведения well-being мероприятий</div>
+            </div>
+            
+        </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>
+        
+
+
+        
     </>
     
 

src/Components/HomePage/style.module.scss

@@ -1,6 +1,89 @@
 
 
-.title {
+.container {
-    font-size: 100px;
+    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/MeetAuthPage/index.jsx

@@ -0,0 +1,154 @@
+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 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>
+
+            <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 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>
+                            <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>
+            <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>
+        </>
+        
+    )
+
+
+}
+export default MeetPage;

src/Components/MeetAuthPage/style.module.scss

@@ -0,0 +1,371 @@
+.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;
+    &_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;
+   }
+}

src/Components/MeetPage/index.jsx

@@ -0,0 +1,109 @@
+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 { HttpApiMethods } from '../fetchUtils/FetchUtils';
+import {useState} from 'react'
+import { style } from "@mui/system";
+import Card from "../Card";
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+
+
+const httpApiMethods = new HttpApiMethods()
+const meets = await httpApiMethods.GetMeetings()
+
+const MeetPage = () => {
+   
+    const filterMeet = meets.filter( (item, index) => index <= 3 )
+    console.log(filterMeet)
+    const id = 5
+    console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
+    const meetPng = (id) => {
+        console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
+        return httpApiMethods.APIURL_FILES + meets[id].speackerImage 
+        
+    }
+    console.log(meetPng(id))
+    function extractDateTime(dateString) {
+        const dateTime = new Date(dateString);
+        const date = dateTime.toLocaleDateString();
+        const time = dateTime.toLocaleTimeString();
+        
+        return { date, time };
+    }
+    
+    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}><img src={meetPng(id)}></img></div>
+               
+            </section>
+            <div className={styles.meets__otziv_container}>
+                <div className={styles.meets__otziv}>
+                    <span className={styles.meets__otziv_title}>Отзывы</span>
+                    Оставьте первый отзыв
+                </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.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>
+            </section>
+            <section className={styles.someMeetings}>
+            <div className={styles.someMeetings__title}>Еще мероприятия</div>
+            <Box sx={{ flexGrow: 1 }}>
+                <Grid container spacing={1}>
+                    {Array.isArray(meets) ? (
+                        filterMeet.map((item, index) => (
+                        
+                            
+                            <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
+                               <div className='event_card' >
+                                    <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
+                                        <div className="taggs">
+                                            <div className='tagged'>{item.tags}</div>
+                                            <div className="feautures">{item.type}</div>
+                                        </div>
+                                    <h4 className="event-card__title">{item.title}</h4>
+                                    <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
+                                </div>
+                            </Grid>
+                        
+                        
+                        
+                        ))
+                    ) : (
+                        <p>Неверный тип данных с сервера!</p>
+                )}
+                
+                </Grid>
+            </Box>
+            </section>
+        </>
+        
+    )
+
+
+}
+export default MeetPage;

src/Components/MeetPage/style.module.scss

@@ -0,0 +1,226 @@
+.meets {
+    margin-top: 150px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    &__img {
+        width: 44%;
+        height: 300px;
+        
+        
+        img {
+            
+            height: 100%;
+            
+        }
+    }
+    &__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: flex-end;
+        }
+    }
+    
+}
+.aboutMeet {
+
+    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: Inter;
+        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;
+}

src/Components/TableMeets/TableMeets.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+let Table = styled.div({
+  width: 1520,
+  border: '1px solid black'
+});
+
+let List = styled.div({
+  display: 'flex',
+  // justifyContent: 'center'
+});
+
+let Date = styled.span({
+  marginRight: 100
+});
+let Time = styled.span({
+  marginRight: 100
+});
+let Name = styled.span({
+    marginRight: 100
+  });
+
+const TableMeets = ({ events }) => {
+  const [isOpenMap, setIsOpenMap] = useState({});
+
+  const toggleDropdown = (eventId) => {
+    setIsOpenMap((prevIsOpenMap) => ({
+      ...prevIsOpenMap,
+      [eventId]: !prevIsOpenMap[eventId]
+    }));
+  };
+
+  return (
+    <Table>
+      <ul>
+        {events.map((event) => (
+          <li key={event.id}>
+            <div>
+              <Date>{event.date}</Date>
+              <Time>{event.time}</Time>
+              <Name>{event.title}</Name>
+              <span>
+                <button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
+              </span>
+              {isOpenMap[event.id] && (
+                <div>
+                  <span>{event.speaker}</span>
+                  <img src={event.avatar} alt={event.speaker} />
+                  <p>{event.description}</p>
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Table>
+  );
+};
+
+export default TableMeets;

src/Components/TableMeets/style.module.scss

@@ -0,0 +1,54 @@
+
+.container {
+    background: #ffffff;
+    color: #000000;
+    padding: 20px;
+    animation: fade-in 1s ease-in-out;
+  }
+  
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  
+  .subtitle {
+    font-size: 18px;
+    font-weight: normal;
+  }
+  
+  .button {
+    background: #000000;
+    color: #ffffff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-block;
+    margin-top: 10px;
+  }
+
+.meeting {
+    &__cards {
+        list-style-type: none;
+        width: 80%;
+        padding: 0;
+    }
+    &__container {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    // &__arrow {
+        
+    // }
+}
+

src/Components/css/module.style.css

@@ -1 +0,0 @@
-.title{font-size:100px}/*# sourceMappingURL=module.style.css.map */

src/Components/css/module.style.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../HomePage/module.style.scss"],"names":[],"mappings":"AAEA,OACI,eAAA","file":"module.style.css"}

src/Components/css/style.module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../Header/style.module.scss"],"names":[],"mappings":"AAEA,QACI,WAAA,CACA,SAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,mBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,UAAA,CACA,YAAA,CACA,iBAAA,CACA,OAAA,CACA,QAAA,CAEJ,cACI,cAAA,CAEJ,gBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,mBAAA,CACA,kBAAA,CACA,WAAA,CACA,WAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA","file":"style.module.css"}
+{"version":3,"sources":["../MeetAuthPage/style.module.scss"],"names":[],"mappings":"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","file":"style.module.css"}

src/components/Home/Home.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import './style.css'
+import styled from 'styled-components';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+import {useState} from 'react' 
+import EditForm from '../post/PostForm';
+import Grid from '@mui/material/Grid';
+import Card from '../Card';
+import Box from '@mui/material/Box';
+
+function extractDateTime(dateString) {
+    const dateTime = new Date(dateString);
+    const date = dateTime.toLocaleDateString();
+    const time = dateTime.toLocaleTimeString();
+    
+    return { date, time };
+}
+
+const httpApiMethods = new HttpApiMethods()
+
+const meets = await httpApiMethods.GetMeetings()
+
+
+const Home = () => {
+    const [count, setCount] = useState(7)
+   
+    const filterMeet = meets.filter( (item, index) => index <= count )
+    const allMeets = () => {
+        setCount(meets.length)
+    }
+    return (
+        <>
+            <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
+                <Grid container sx={{width: '96%'}}>
+
+                
+                {Array.isArray(meets) ? (
+                    filterMeet.map((item, index) => (
+                    
+                        
+                        <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
+                             <div className='event_card' >
+                                <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
+                                    <div className="taggs">
+                                        <div className='tagged'>{item.tags}</div>
+                                        <div className="feautures">{item.type}</div>
+                                    </div>
+                                <h4 className="event-card__title">{item.title}</h4>
+                                <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
+                            </div>
+                        </Grid>
+                    
+                    
+                    
+                    ))
+                ) : (
+                    <p>Неверный тип данных с сервера!</p>
+                )}
+                {/* <EditForm></EditForm> */}
+                </Grid>
+            </Box>
+            <div className='allButton__container'>
+                <button onClick={allMeets} className='allButton'>Все мероприятия</button>
+            </div>
+        </>
+        
+        
+    );
+}
+
+export default Home;

src/components/Home/style.css

@@ -0,0 +1,110 @@
+.event_card {
+    width: 292px;
+    height: 586px;
+    flex-shrink: 0;
+    margin-top: 100px;
+    margin-right: 11px;
+}
+
+.wrapp {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-left: 40px;
+    /* max-width: 1521px; */
+}
+
+:root {
+    text-align: left;
+}
+
+.event-card_date {
+    color: var(--gray_text, #888);
+    text-align: left;
+
+/* title */
+font-family: Montserrat;
+font-size: 22px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+}
+
+.event-card__photo {
+    width: 292px;
+    height: 340px;
+    flex-shrink: 0;
+background: #D9D9D9;
+margin-bottom: 26px;
+}
+
+.event-card_title {
+    color: #000;
+
+    font-family: Montserrat;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-align: left;
+}
+
+.img {
+    width: 292px;
+    height: 340px;
+    flex-shrink: 0;
+}
+.feautures {
+    
+display: flex;
+justify-content: center;
+font-family: Montserrat;
+align-items: center;
+font-size: 8px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+border-radius: 10px;
+background: #E7FFD2;
+height: 15px;
+padding: 10px;
+}
+
+.tagged {
+    display: inline-flex;
+padding: 10px;
+justify-content: center;
+align-items: center;
+gap: 10px;
+border-radius: 10px;
+border: 1px solid var(--gray_text, #888);
+}
+.taggs {
+    display: flex;
+    justify-content: space-between;
+}
+.allButton {
+    color: var(--Black_Text, #151515);
+    text-align: center;
+
+    /* Buttom max */
+    font-family: Gilroy;
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 125%; /* 35px */
+    letter-spacing: -0.84px;
+    border-radius: 1000px;
+    border: 1px solid var(--Gray_Line, #D0D2D8);
+    width: 300px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+}
+.allButton__container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/components/edit/EditForm.jsx

@@ -0,0 +1,104 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+
+const EditForm = () => {
+    const formRef = useRef(null);
+    const [dataIsLoad, setDataIsLoad] = useState(false);
+    const httpApiMethods = new HttpApiMethods();
+
+    const post = async (event) => {
+        event.preventDefault(); // Предотвращение действия по умолчанию
+        let formData = new FormData(formRef.current);
+        setDataIsLoad(false);
+        const updatedMeets = httpApiMethods.EditMeetings(formData)
+            .then(() => {
+                setDataIsLoad(true);
+            });
+    };
+
+    const handleData = (data) => {
+        if (Array.isArray(data) && data.length > 0) {
+            setData(data);
+        } else {
+            setData([]);
+            console.error('Неверный тип данных с сервера!');
+        }
+    };
+
+    const fetchData = async () => {
+        try {
+            const data = await httpApiMethods.GetMeetings();
+            handleData(data);
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    const [data, setData] = useState([]);
+    const [selectedId, setSelectedId] = useState('');
+    const [selectedData, setSelectedData] = useState(null);
+
+    const handleDataClick = (id) => {
+        const selected = data.find((item) => item.id === id);
+        setSelectedData(selected);
+    };
+
+    const handleChange = (event) => {
+        setSelectedData({
+            ...selectedData,
+            [event.target.name]: event.target.value
+        });
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const FillInputs = () => {
+        httpApiMethods.GetByID()
+    }
+
+    return (
+        <div>
+            <h2>Edit</h2>
+            <div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
+            
+                <ul>
+                    {Array.isArray(data) && data.length > 0 ? (
+                        data.map((item, index) => (
+                            <button onClick={() => handleDataClick(item.id)} key={index}>
+                                {item.id}
+                                <div>{item.title}</div>
+                            </button>
+                        ))
+                    ) : (
+                        <p>Неверный тип данных с сервера!</p>
+                    )}
+                </ul>
+                {/* автозаполнение инпутов */}
+                {selectedData && (
+                    <>
+                    <form ref={formRef}>
+                        <input type="text" placeholder='id' name='id' value={selectedData.id} onChange={handleChange} />
+                        <input type="text" placeholder='name' name='title' value={selectedData.title} onChange={handleChange} />
+                        <input type="text" placeholder='time' name='time' value={selectedData.time} onChange={handleChange} />
+                        <input type="text" placeholder='theme' name='theme' value={selectedData.theme} onChange={handleChange} />
+                        <input type="text" placeholder='speakerName' name='speakerName' value={selectedData.speakerName} onChange={handleChange} />
+                        <input type="file" placeholder='speackerImage' name='speackerImage'/>
+                        <input type="file" placeholder='placeImages' name='placeImages'/>
+                        <input type="text" placeholder='splecializations' name='splecializations' value={selectedData.splecializations} onChange={handleChange} />
+                        <input type="text" placeholder='speakerEmail' name='speakerEmail' value={selectedData.speakerEmail} onChange={handleChange} />
+                        <input type="text" placeholder='tags' name='tags' value={selectedData.tags} onChange={handleChange} />
+                        <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone' value={selectedData.speakerTelephone} onChange={handleChange} />
+                        <input type="text" placeholder='type' name='type' value={selectedData.type} onChange={handleChange} />
+                        <input type="text" placeholder='videoUrl' name='videoUrl' value={selectedData.videoUrl} onChange={handleChange} />
+                        <button onClick={post}>Edit</button>
+                        </form>
+                    </>
+                )}
+            
+        </div>
+    );
+};
+
+export default EditForm;

src/components/fetchUtils/FetchUtils.jsx

@@ -0,0 +1,154 @@
+/* eslint-disable no-unused-vars */
+import axios from "axios"
+import { useState } from "react"
+import './style.css'
+
+
+
+export class HttpApiMethods {
+
+
+
+  api = axios.create({
+    baseURL: "https://cyberbloom.zetcraft.ru/api",
+    headers: {
+      "Access-Control-Allow-Origin": "http://localhost:5173",
+    },
+  });
+
+  APIURL = "https://cyberbloom.zetcraft.ru/api"
+  APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/"
+
+  GetByID = async (id) => {
+    let innerUrl = this.APIURL + `/meetings?id=${id}`
+
+    const response = await axios.get(innerUrl)
+
+    return response.data;
+  }
+
+  GetMeetings = async () => {
+    let innerUrl = this.APIURL + `/meetings/list?offset=0&limit=20`;
+
+    const response = await axios.get(innerUrl);
+
+    return response.data;
+  }
+
+  // createForm = (data) => {
+  //   const [formDat, setFormDat] = useState({});
+
+  //   const handleChange = (e) => {
+  //     setFormDat({ ...formDat, [e.target.name]: e.target.value });
+  //   };
+
+  //   const handleSubmit = (e) => {
+  //     let innerUrl = this.APIURL + `/meetings`
+  //     e.preventDefault();
+  //     // Отправка объекта формы на сервер
+  //     fetch(innerUrl, {
+  //       method: 'POST',
+  //       body: JSON.stringify(formDat),
+  //       headers: {
+  //         'Content-Type': 'application/json',
+  //       },
+  //     })
+  //       .then((response) => response.json())
+  //       .then((data) => {
+  //         // Обработка ответа от сервера
+  //         console.log(data);
+  //       })
+  //       .catch((error) => {
+  //         // Обработка ошибок
+  //         console.error(error);
+  //       });
+  //   };
+  //   let fields = Object.keys(data);
+
+  //   let formData = new FormData();
+  //   fields.forEach(f => {
+
+  //     formData.append(f, data[f]);
+  //   })
+  //   handleChange(data)
+  //   handleSubmit(data)
+
+  //   return formData;
+  // }
+  AddMeetings = async (data) => {
+    let innerUrl = this.APIURL + `/meetings`;
+
+    let response = await axios.postForm(innerUrl, data);
+    return response.data;
+
+  }
+
+  EditMeetings = async (data) => {
+    api.get("/meetings").then((response) => {
+      console.log(response.data);
+      return response.data;
+    });
+    
+
+  }
+
+  DeleteMeetings = async (id) => {
+    let innerUrl = this.APIURL + `/meetings?id=${id}`
+
+    const response = await axios.get(innerUrl)
+
+    return response.data;
+  }
+}
+
+
+
+const httpApiMethods = new HttpApiMethods() // Создание экземпляра класса HttpApiMethods
+
+const meets = httpApiMethods.GetMeetings()
+
+const FetchUtils = () => {
+
+  const [user, setUser] = useState([])
+
+  async function getData() {
+    const response = await axios.get(APIURL)
+    console.log(response.data)
+    setUser(response.data)
+  }
+
+  const removeList = () => {
+    setUser([])
+  }
+
+  return (
+    <>
+      <button onClick={getData}>Click to Get Data</button>
+      <button onClick={removeList}>Click to Remove Data Listing</button>
+      {/* Mapping of data */}
+      <div>
+        {Array.isArray(meets) ? (
+          <ul>
+            {meets.map((item) => (
+              <ol key={item.id}>
+                <li>{item.title}</li>
+                <li>{item.time}</li>
+                <li>{item.speakerName}</li>
+                <li>{item.speackerImage}</li>
+                <li>{item.splecializations}</li>
+                <li>{item.type}</li>
+                <li>{item.speakerTelephone}</li>
+                <li>{item.speakerEmail}</li>
+                <li>{item.tags}</li>
+                <li>{item.videoUrl}</li>
+              </ol>
+            ))}
+          </ul>
+        ) : (
+          <p>Bad data type from server!</p>
+        )}
+      </div>
+    </>
+  );
+}
+export default FetchUtils;

src/components/fetchUtils/style.css

@@ -0,0 +1,18 @@
+ul {
+    display: flex;
+    /* justify-content: center; */
+    flex-direction: column;
+    list-style: none;
+}
+
+ol {
+    display: flex;
+    /* justify-content: center; */
+    /* align-items: center; */
+    /* text-align: left; */
+    list-style: none;
+}
+
+li {
+    margin-right: 30px;
+}

src/components/post/PostForm.jsx

@@ -0,0 +1,46 @@
+import React, { useRef, useState } from 'react';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+
+
+const PostForm = () => {
+    const formRef = useRef(null); // Добавление этой строки
+    const [dataIsLoad, setDataIsLoad] = useState(false)
+
+    let post = async () => {
+        const httpApiMethods = new HttpApiMethods();
+        let formData = new FormData(formRef.current); // Изменение этой строки
+        setDataIsLoad(false)
+        const updatedMeets = httpApiMethods.AddMeetings(formData)
+        .then(
+            () => {
+                setDataIsLoad(true)
+                
+            }
+        )
+        
+    }
+
+    return (
+        <div>
+            <h2>Post</h2>
+            <div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
+            <form ref={formRef} action='https://cyberbloom.zetcraft.ru/api/meetings'>
+                <input type="text" placeholder='name' name='title'/>
+                <input type="text" placeholder='time' name='time'/>
+                <input type="text" placeholder='theme' name='theme'/>
+                <input type="text" placeholder='speakerName' name='speakerName'/>
+                <input type="file" placeholder='speackerImage' name='speackerImage'/>
+                <input type="file" placeholder='placeImages' name='placeImages'/>
+                <input type="text" placeholder='splecializations' name='splecializations'/>
+                <input type="text" placeholder='speakerEmail' name='speakerEmail'/>
+                <input type="text" placeholder='tags' name='tags'/>
+                <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
+                <input type="text" placeholder='type' name='type'/>
+                <input type="text" placeholder='videoUrl' name='videoUrl'/>
+                <button onClick={post}>Create</button>
+                </form>
+        </div>
+    );
+}
+
+export default PostForm;