search

src/App.jsx

@@ -1,43 +1,25 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-import FetchUtils from './components/fetchUtils/FetchUtils'
-import TableMeets from './components/TableMeets'
 
-const events = [
+import './App.css'
-  {
+import { BrowserRouter, Routes, Route } from "react-router-dom";
-    id: 1,
+import BeingPage from "./Components/BeingPage/index.jsx";
-    date: '10.10.2022',
+import HomePage from "./Components/HomePage/index.jsx";
-    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,
-  },
-  // Добавьте другие мероприятия сюда
-];
 
 
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
     <>
       {/* <FetchUtils /> */}
-      <TableMeets  events={ events } />
+      
+      <BrowserRouter>
+        <Routes>
+          <Route path="/being" element={<BeingPage />}/>
+          <Route path="/" element={<HomePage />}/>
+        </Routes>
+      </BrowserRouter>
     </>
   )
 }

src/Components/BeingPage/index.jsx

@@ -0,0 +1,10 @@
+import React from "react"
+import styles from "./style.module.scss";
+
+const BeingPage = () => {
+    return (
+        <div>Hello world</div>
+    )
+}
+
+export default BeingPage

src/Components/Header/index.jsx

@@ -0,0 +1,22 @@
+
+import styles from './style.module.scss';
+import logo from '../../img/headerImg/OgettoLogo.png';
+import { useNavigate } from "react-router-dom";
+
+const Header = () => {
+    const navigate = useNavigate();
+    const handleHome = () => {
+        navigate('/');
+    }
+
+    return (
+        <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>
+            </header>
+        </div>
+    )
+
+}
+export default Header;

src/Components/Header/style.module.scss

@@ -0,0 +1,37 @@
+
+
+.header {
+    height: 75px;
+    width: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &__container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 150px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+    }
+    &__logo {
+        cursor: pointer;
+    }
+    &__button {
+        display: flex;
+        align-items: 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;
+    }
+}

src/Components/HomePage/index.jsx

@@ -0,0 +1,70 @@
+import Header from "../Header";
+import styles from "./style.module.scss";
+import TableMeets from '../TableMeets/TableMeets'
+import { style } from "@mui/system";
+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 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>
+
+        
+    </>
+    
+
+    )
+}
+export default HomePage;

src/Components/HomePage/style.module.scss

@@ -0,0 +1,87 @@
+
+
+
+.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

@@ -1,25 +1,6 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
+import styles from './style.module.scss';
-
+import arrow from '../../img/homePage/downArrow.png';
-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({});
@@ -32,17 +13,15 @@ const TableMeets = ({ events }) => {
   };
 
   return (
-    <Table>
+    <div className={styles.meeting__container}>
-      <ul>
+      <ul className={styles.meeting__cards}>
         {events.map((event) => (
           <li key={event.id}>
-            <div>
+            <div className={styles.meeting__card}>
-              <Date>{event.date}</Date>
+              <span className={styles.date}>{event.date}</span>
-              <Time>{event.time}</Time>
+              <span className={styles.time}>{event.time}</span>
-              <Name>{event.title}</Name>
+              <span className={styles.title}>{event.title}</span>
-              <span>
+              <div className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}><img className={styles.meeting__arrow} src={arrow} ></img></div>
-                <button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
-              </span>
               {isOpenMap[event.id] && (
                 <div>
                   <span>{event.speaker}</span>
@@ -54,7 +33,7 @@ const TableMeets = ({ events }) => {
           </li>
         ))}
       </ul>
-    </Table>
+    </div>
   );
 };
 

src/Components/TableMeets/style.module.scss

@@ -0,0 +1,16 @@
+.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/style.module.css

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

@@ -0,0 +1 @@
+{"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"}