my commit

src/components/Header/Header.css

@@ -0,0 +1,44 @@
+.navigation ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+  }
+  
+  .navigation li {
+    margin-right: 20px; /* Расстояние между элементами меню */
+  }
+  
+  .navigation a {
+    text-decoration: none;
+    color: #333; /* Цвет ссылок */
+    font-weight: bold;
+  }
+  
+  .navigation a:hover {
+    color: #515151; /* Цвет при наведении */
+  }
+
+ 
+.header {
+    background-color: #f8f9fa; /* Светлый фон шапки */
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* Распределяем элементы по краям */
+    border-bottom: 1px solid #dee2e6; /* Тонкая линия снизу */
+  }
+
+
+.search-button {
+    background-color: #121212;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .search-button:hover {
+    background-color: #2e2e2e;
+  }

src/components/Header/Header.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Logo from './Logo';
+import Navigation from './Navigation';
+import SearchButton from './SearchButton'; 
+import './Header.css';
+
+function Header() {
+  return (
+    <header className="header">
+      <Logo />
+      <Navigation />
+      <SearchButton /> 
+    </header>
+  );
+}
+
+export default Header;

src/components/Header/Logo.css

@@ -0,0 +1,14 @@
+.logo {
+  display: flex; /* для гибкого распложения элементов */
+  align-items: center; /* по центру и вертикали */
+}
+
+.logo-image {
+  height: 80px; /* высота */
+  margin-right: 10px; /* отступ справа */
+}
+
+.logo-text {
+  font-weight: bold; /* шрифт жирн */
+  font-size: 1.2em;
+}

src/components/Header/Logo.js

@@ -0,0 +1,14 @@
+import React from "react";
+import logo from "../../img/logo.svg";
+import "./Logo.css";
+
+function Logo() {
+  return (
+    <div className="logo">
+      <img src={logo} alt="Logo" className="logo-image" />
+      <span className="logo-text">SkinCare Advisor</span>
+    </div>
+  );
+}
+
+export default Logo;

src/components/Header/Navigation.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function Navigation() {
+  return (
+    <nav className="navigation">
+      <ul>
+        <li><a href="/">Помощь</a></li>
+        <li><a href="/contacts">Контакты</a></li>
+        <li><a href="/search">Поиск</a></li>
+        <li><a href="/skin-types">Типы кожи</a></li>
+        <li><a href="/reviews">Отзывы</a></li>
+        <li><a href="/auth">Вход/Регистрация</a></li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Navigation;

src/components/Header/SearchButton.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function SearchButton() {
+  return (
+    <button className="search-button">Поиск</button>
+  );
+}
+
+export default SearchButton;