добавил ветку main-page

front/src/components/Header/Header.module.css

@@ -0,0 +1,146 @@
+.header {
+  /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
+  background-color: white;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  width: 100%;
+}
+
+.phoneBlock a{
+    font-size: 10px;
+}
+
+.headerMenu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.headerMenu a {
+  position: relative;
+  color: black;
+  text-decoration: none;
+  padding: 1.8rem 2rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 500;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.headerMenu a::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.headerMenu a::after {
+  content: '';
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.headeLogo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: white;
+  text-decoration: none;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 700;
+  font-size: 1.4rem;
+  transition: all 0.3s ease;
+}
+
+.logoImage {
+  height: 80px;
+  border-radius: 8px;
+  object-fit: contain;
+  transition: all 0.3s ease;
+  /*filter: brightness(0) invert(1);*/
+}
+
+.headerMenu a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.headerMenu a:hover::before {
+  width: 80%;
+}
+
+.headerMenu a:hover::after {
+  left: 100%;
+}
+
+.headerMenu a.active {
+  background: rgba(255, 255, 255, 0.15);
+  font-weight: 600;
+}
+
+.headerMenu a.active::before {
+  width: 100%;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+}
+
+/* Анимация при загрузке */
+.headerMenu a {
+  animation: slideIn 0.6s ease forwards;
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.headerMenu a:nth-child(1) { animation-delay: 0.1s; }
+.headerMenu a:nth-child(2) { animation-delay: 0.2s; }
+.headerMenu a:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes slideIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .headerMenu {
+    flex-direction: column;
+    padding: 0;
+  }
+  
+  .headerMenu a {
+    width: 100%;
+    text-align: center;
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .headerMenu a:last-child {
+    border-bottom: none;
+  }
+}
+
+/* Эффект пульсации при наведении на кнопку выхода */
+.headerMenu a[onclick]:hover {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+}
+
+.headerMenu a[onclick]:hover::before {
+  background: linear-gradient(90deg, #ffd89b, #ff6b6b);
+}

front/src/components/Header/Header.tsx

@@ -0,0 +1,26 @@
+import { NavLink } from "react-router-dom";
+import styles from './Header.module.css'
+import logo from '../../assets/images/Logo.jpg'
+
+const Header = () =>{
+
+    return(
+        <nav className={styles.header}>
+            <div className={styles.headerMenu}>
+                <div className={styles.headeLogo}>
+                    <img src={logo} alt="logo" className={styles.logoImage}/>
+                    <div className={styles.phoneBlock}>
+                        <a href="" className={styles.phoneBlock}>+7 905 010 58 40</a>
+                    </div>
+                </div>
+                <div className={styles.headerNav}>
+                <NavLink to="/" end >ГЛАВНАЯ</NavLink>
+                <NavLink to="about" >O КОМПАНИИ</NavLink>
+                <NavLink to="products" >ПРОДУКЦИЯ</NavLink>
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Header;