Header

src/App.jsx

@@ -12,7 +12,7 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/being" element={<BeingPage />}/>
-          <Route path="/home" element={<HomePage />}/>
+          <Route path="/" element={<HomePage />}/>
         </Routes>
       </BrowserRouter>
       

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

@@ -1,11 +1,15 @@
-
+import Header from "../Header";
 import styles from "./style.module.scss";
 
 
 const HomePage = () => {
     return (
+    <>
+        <Header></Header>
+
+        <section></section>
+    </>
     
-        <div className={styles.title}>dadada</div>
 
     )
 }

src/Components/css/style.module.css

@@ -0,0 +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 */

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

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