Merge branch 'main' of https://git.zetcraft.ru/cevka/OgeetoCaseCyberGarden

src/App.jsx

@@ -6,7 +6,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import BeingPage from "./Components/BeingPage/index.jsx";
 import HomePage from "./Components/HomePage/index.jsx";
 import MeetPage from "./Components/MeetPage/index.jsx";
-
+import MeetAuthPage from "./Components/MeetAuthPage/index.jsx";
 
 
 
@@ -21,6 +21,7 @@ function App() {
           <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

@@ -1,22 +1,32 @@
 import './style.module.scss';
 
 
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
 
-
-const Card = () => {
+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" />
-                <div className="taggs">
-                <div className='tagged'>Психология</div>
-                <div className="feautures">Предстоящее</div>
-                </div>
-                <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
-                <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
+            <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>
         </>
     )

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/style.module.scss

@@ -86,4 +86,4 @@
 }
 .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

@@ -3,13 +3,37 @@ 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 MeetPage = () => {
 
+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>
@@ -21,7 +45,7 @@ const MeetPage = () => {
                     <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>
+                <div className={styles.meets__img}><img src={meetPng(id)}></img></div>
                
             </section>
             <div className={styles.meets__otziv_container}>
@@ -50,18 +74,28 @@ const MeetPage = () => {
             <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>
+                    {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>

src/Components/MeetPage/style.module.scss

@@ -6,7 +6,13 @@
     &__img {
         width: 44%;
         height: 300px;
-        background-color: #D9D9D9;
+        
+        
+        img {
+            
+            height: 100%;
+            
+        }
     }
     &__mainInfo {
         &_container {

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

@@ -1 +1 @@
-{"version":3,"sources":["../MeetPage/style.module.scss"],"names":[],"mappings":"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","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

@@ -2,43 +2,69 @@ import React from 'react';
 import './style.css'
 import styled from 'styled-components';
 import { HttpApiMethods } from '../utils/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 = () => {
-
-    function extractDateTime(dateString) {
-        const dateTime = new Date(dateString);
-        const date = dateTime.toLocaleDateString();
-        const time = dateTime.toLocaleTimeString();
-        
-        return { date, time };
+    const [count, setCount] = useState(7)
+   
+    const filterMeet = meets.filter( (item, index) => index <= count )
+    const allMeets = () => {
+        setCount(meets.length)
     }
-
     return (
-        <div className='wrapp'>
-            {Array.isArray(meets) ? (
-                meets.map((item, index) => (
-                    <div className='event_card' key={index}>
-                        <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>
-                ))
-            ) : (
-                <p>Неверный тип данных с сервера!</p>
-            )}
-            {/* <EditForm></EditForm> */}
-        </div>
+        <>
+            <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>
+        </>
+        
+        
     );
 }
 

src/components/Home/style.css

@@ -1,6 +1,6 @@
 .event_card {
     width: 292px;
-    height: 626px;
+    height: 586px;
     flex-shrink: 0;
     margin-top: 100px;
     margin-right: 11px;
@@ -82,4 +82,29 @@ 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;
 }