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;
+  }