cardd

tables

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==",
-      "dev": true
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
     },
     "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.jsx

@@ -1,22 +1,27 @@
 
+import './App.css'
+import FetchUtils from './components/fetchUtils/FetchUtils'
+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'
+
+
+
+
 
 function App() {
 
-
   return (
     <>
+      {/* <FetchUtils /> */}
+      
       <BrowserRouter>
         <Routes>
           <Route path="/being" element={<BeingPage />}/>
           <Route path="/" element={<HomePage />}/>
         </Routes>
       </BrowserRouter>
-      
-
     </>
   )
 }

src/Components/HomePage/index.jsx

@@ -1,13 +1,69 @@
 import Header from "../Header";
 import styles from "./style.module.scss";
+import TableMeets from '../TableMeets/TableMeets'
 
-
+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>
+        </section>
+
+
+        
     </>
     
 

src/Components/HomePage/style.module.scss

@@ -1,6 +1,87 @@
 
 
-.title {
-    font-size: 100px;
+
+.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: 40px;
+}
+.search_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.search__descr {
+    margin-right: 25px;
+}

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

@@ -1 +1 @@
-.header{height:75px;width:80%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.header__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:150px;position:absolute;top:0px;left:0px}.header__logo{cursor:pointer}.header__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:100px;background:#ffed00;width:200px;height:42px;color:#000;font-family:Montserrat;font-size:25px;font-style:normal;font-weight:400;line-height:normal}/*# sourceMappingURL=style.module.css.map */
+.muza__container{height:700px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.muza__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:-webkit-box;display:-ms-flexbox;display:flex;width:90%}.muza__descr{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:-webkit-box;display:-ms-flexbox;display:flex;width:60%}.muza__descr_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.meeting__container{height:1400px}.meeting__inputs{width:90%;height:46px;border-radius:10px;border:1px solid #000;padding-left:40px}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.select{margin-right:50px;height:35px;border-radius:10px;border:1px solid var(--gray_stroke, #D0D2D8);width:200px}.select__container{display:-webkit-box;display:-ms-flexbox;display:flex;width:93%;margin-top:30px}.NewContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:40px}.search_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.search__descr{margin-right:25px}/*# sourceMappingURL=style.module.css.map */

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":["../HomePage/style.module.scss"],"names":[],"mappings":"AAII,iBACI,YAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,UAAA,CAGJ,aACI,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,mBAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CAGJ,aAKI,eAAA,CACA,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CAdA,uBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,oBAAA,CAAA,iBAAA,CAAA,wBAAA,CAiBT,oBACC,aAAA,CAED,iBACK,SAAA,CACA,WAAA,CACA,kBAAA,CACA,qBAAA,CACA,iBAAA,CAIR,WACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAGJ,QACI,iBAAA,CACA,WAAA,CACA,kBAAA,CACA,4CAAA,CACA,WAAA,CACA,mBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CACA,eAAA,CAGR,cACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,oBAAA,CAAA,iBAAA,CAAA,wBAAA,CACA,eAAA,CAEJ,kBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAEJ,eACI,iBAAA","file":"style.module.css"}

src/components/Home/Home.jsx

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

src/components/fetchUtils/FetchUtils.jsx

@@ -0,0 +1,68 @@
+/* eslint-disable no-unused-vars */
+import axios from "axios"
+import { useState } from "react"
+import './style.css'
+
+
+
+const FetchUtils = () => {
+    // default value of data is object or array/nums/string
+    // const [rata, setRata] = useState([])
+    const [user, setUser] = useState([])
+    // single axios feetching
+
+    // useEffect(
+    //     () => {
+    //         async function getData() {
+    //             const response = await axios.get('http://localhost:5000/weatherforecast')
+    //             console.log(response.data)
+    //             setRata(response.data)
+    //         }
+    //         getData()
+    //     }, []
+    // )
+    // useEffect(
+    //     () => {
+            async function getData() {
+                const response = await axios.get('https://jsonplaceholder.typicode.com/users')
+                console.log(response.data)
+                setUser(response.data)
+            }
+    //         getData()
+    //     }, []
+    // )
+    // Loop of axios fetching \\
+
+    // async function getData() {
+    //     const response = await axios.get('http://localhost:5000/weatherforecast')
+    //     console.log(response.data)
+    //     setRata(response.data)
+    // }
+    // getData()
+    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(user) ? (
+              <ul>
+                {user.map((item) => (
+                  <ol key={item.id}>
+                    <li>{item.name}</li>
+                    <li>{item.username}</li>
+                    <li>{item.email}</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;
+}