card

src/Components/HomePage/index.jsx

@@ -1,6 +1,8 @@
 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";
 const events = [
     {
       id: 1,
@@ -27,8 +29,10 @@ const events = [
 const HomePage = () => {
     return (
     <>
-        <Header></Header>
-        <TableMeets  events={ events } />
+        {/* <Header></Header>
+        <TableMeets  events={ events } /> */}
+        <Home></Home>
+        {/* <FetchUtils></FetchUtils> */}
         
     </>
     

src/Components/TableMeets/TableMeets.jsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import styles from './style.module.scss';
 import logo from '../../img/homePage/downArrow.png';
-import { style } from '@mui/system';
+import { Container, Grid, Button, Typography } from '@mui/material';
+import { column } from 'stylis';
+
 const TableMeets = ({ events }) => {
   const [isOpenMap, setIsOpenMap] = useState({});
 
@@ -13,27 +15,32 @@ const TableMeets = ({ events }) => {
   };
 
   return (
-    <div className={styles.meeting__container}>
-      <ul className={styles.meeting__cards}>
+
+
+    <Container className={styles.meeting__container}>
+      <Grid sx={{display: 'flex', flexDirection: 'column'}} container className={styles.meeting__cards}>
         {events.map((event) => (
-          <li  key={event.id}>
-            <div className={styles.meeting__card}>
-              <span className={styles.date}>{event.date}</span>
-              <span className={styles.time}>{event.time}</span>
-              <span className={styles.title}>{event.title}</span>
-              <div className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}><img src={logo} ></img></div>
+          <Grid item key={event.id}>
+            <Container className={styles.meeting__card}>
+              <Typography className={styles.date}>{event.date}</Typography>
+              <Typography className={styles.time}>{event.time}</Typography>
+              <Typography className={styles.title}>{event.title}</Typography>
+              <Button className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}>
+                <img src={logo} alt="Logo" />
+              </Button>
               {isOpenMap[event.id] && (
-                <div>
-                  <span>{event.speaker}</span>
+                <Container>
+                  <Typography>{event.speaker}</Typography>
                   <img src={event.avatar} alt={event.speaker} />
-                  <p>{event.description}</p>
-                </div>
+                  <Typography>{event.description}</Typography>
+                </Container>
               )}
-            </div>
-          </li>
+            </Container>
+          </Grid>
         ))}
-      </ul>
-    </div>
+      </Grid>
+    </Container>
+
   );
 };
 

src/Components/TableMeets/style.module.scss

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

src/components/Home/Home.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Header from '../Header';
+import './style.css'
+import styled from 'styled-components';
+
+const Taged = styled.div({
+    borderRadius: 10,
+    backgroundColor: 'gray',
+    
+})
+
+const Home = () => {
+    return (
+        <div>
+            {/* <Header></Header> */}
+            <div className='event_card'>
+                <div className="event-card__photo"></div>
+                <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>
+        </div>
+    );
+}
+
+export default Home;

src/components/Home/style.css

@@ -0,0 +1,64 @@
+.event_card {
+    width: 342px;
+height: 626px;
+flex-shrink: 0;
+}
+
+: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: 342px;
+height: 340px;
+flex-shrink: 0;
+background: #D9D9D9;
+}
+
+.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: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+border-radius: 10px;
+background: #E7FFD2;
+}
+
+.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;
+}