add hero component

frontend/src/components/Header/Header.module.css

@@ -0,0 +1,86 @@
+.header {
+  height: 96px;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.logo {
+  flex-shrink: 0;
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -1.5px;
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  margin-left: 40px;
+}
+
+.navigationItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #111;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.navigationItem:hover {
+  opacity: 0.6;
+}
+
+.arrow {
+  font-size: 9px;
+  line-height: 1;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  width: 320px;
+  height: 44px;
+  margin-left: 40px;
+  padding: 0 16px;
+  border-radius: 24px;
+  background-color: #f5f5f5;
+}
+
+.searchIcon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: #666;
+}
+
+.searchInput {
+  width: 100%;
+  margin-left: 10px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: #111;
+  font-family: inherit;
+  font-size: 14px;
+}
+
+.searchInput::placeholder {
+  color: #777;
+}
+
+.searchInput::-webkit-search-cancel-button {
+  cursor: pointer;
+}

frontend/src/components/Header/Header.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react'
+
+import { navigationItems } from '../../shared/navigation/navigation.data'
+import styles from './Header.module.css'
+
+function Header() {
+  const [isShopOpen, setIsShopOpen] = useState(false)
+
+  return (
+    <header className={styles.header}>
+      <div className="container">
+        <h1 className={styles.logo}>shop.co</h1>
+
+        <nav className={styles.navigation}>
+          {navigationItems.map((item) =>
+            item.children ? (
+              <button
+                key={item.label}
+                type="button"
+                className={styles.navigationItem}
+                onClick={() => setIsShopOpen(!isShopOpen)}
+              >
+                {item.label}
+                <span className={styles.arrow}>▼</span>
+              </button>
+            ) : (
+              <a
+                key={item.href}
+                href={item.href}
+                className={styles.navigationItem}
+              >
+                {item.label}
+              </a>
+            ),
+          )}
+        </nav>
+
+        <div className={styles.search}>
+          <svg
+            className={styles.searchIcon}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <circle
+              cx="11"
+              cy="11"
+              r="7"
+              stroke="currentColor"
+              strokeWidth="2"
+            />
+            <path
+              d="M16.5 16.5L21 21"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+
+          <input
+            type="search"
+            placeholder="Search for products..."
+            className={styles.searchInput}
+          />
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

frontend/src/components/Hero/Hero.module.css

@@ -0,0 +1,172 @@
+.hero {
+  background-color: #F2F0F1; /* Светло-серый фон как на макете */
+  min-height: 90vh;
+  padding: 40px 0;
+  display: flex;
+  align-items: center;
+  font-family: 'Inter', sans-serif; /* Или ваш шрифт */
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 40px;
+}
+
+/* Левая часть */
+.left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.headline {
+  font-size: 64px;
+  font-weight: 800;
+  line-height: 1.1;
+  text-transform: uppercase;
+  margin-bottom: 24px;
+  color: #000;
+  letter-spacing: -1px;
+}
+
+.description {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #666;
+  margin-bottom: 32px;
+  max-width: 450px;
+}
+
+.ctaButton {
+  background-color: #000;
+  color: #fff;
+  border: none;
+  padding: 16px 48px;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: transform 0.2s ease, background-color 0.2s;
+  width: fit-content;
+  margin-bottom: 60px; /* Отступ до статистики */
+}
+
+.ctaButton:hover {
+  background-color: #333;
+  transform: translateY(-2px);
+}
+
+/* Статистика */
+.stats {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+
+.statItem {
+  display: flex;
+  flex-direction: column;
+}
+
+.statNumber {
+  font-size: 32px;
+  font-weight: 700;
+  color: #000;
+}
+
+.statLabel {
+  font-size: 14px;
+  color: #888;
+  margin-top: 4px;
+}
+
+.statDivider {
+  width: 1px;
+  height: 40px;
+  background-color: #ddd;
+}
+
+/* Правая часть */
+.right {
+  flex: 1;
+  position: relative;
+  height: 600px; /* Фиксированная высота для контейнера */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.heroImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* Или cover, в зависимости от желаемого эффекта */
+  object-position: center;
+  /* Маска для плавного перехода, если нужно, но здесь просто картинка */
+}
+
+/* Декоративные звездочки */
+.sparkle {
+  position: absolute;
+  color: #000;
+  z-index: 10;
+}
+
+.sparkleTop {
+  top: 50px;
+  right: 50px;
+  width: 60px;
+  height: 60px;
+}
+
+.sparkleMiddle {
+  top: 40%;
+  left: -20px;
+  width: 40px;
+  height: 40px;
+}
+
+/* Адаптивность */
+@media (max-width: 968px) {
+  .container {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .left {
+    align-items: center;
+  }
+
+  .description {
+    max-width: 100%;
+  }
+
+  .stats {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .statDivider {
+    width: 40px;
+    height: 1px;
+  }
+
+  .headline {
+    font-size: 40px;
+  }
+  
+  .right {
+    height: 400px;
+    width: 100%;
+  }
+  
+  .sparkleMiddle {
+    display: none; /* Скрываем лишние элементы на мобильных */
+  }
+}

frontend/src/components/Hero/Hero.tsx

@@ -0,0 +1,60 @@
+import styles from './Hero.module.css'
+
+const SparkleIcon = ({ className }: { className?: string }) => (
+  <svg 
+    viewBox="0 0 24 24" 
+    fill="currentColor" 
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z" />
+  </svg>
+);
+
+function Hero() {
+  return (
+    <div className={styles.hero}>
+      <div className={styles.container}>
+        <div className={styles.left}>
+          <h1 className={styles.headline}>
+            Find clothes<br />that matches<br />your style
+          </h1>
+          <p className={styles.description}>
+            Browse through our diverse range of meticulously crafted garments, 
+            designed to bring out your individuality and cater to your sense of style.
+          </p>
+          <button className={styles.ctaButton}>Shop Now</button>
+          
+          <div className={styles.stats}>
+            <div className={styles.statItem}>
+              <span className={styles.statNumber}>200+</span>
+              <span className={styles.statLabel}>International Brands</span>
+            </div>
+            <div className={styles.statDivider}></div>
+            <div className={styles.statItem}>
+              <span className={styles.statNumber}>2,000+</span>
+              <span className={styles.statLabel}>High-Quality Products</span>
+            </div>
+            <div className={styles.statDivider}></div>
+            <div className={styles.statItem}>
+              <span className={styles.statNumber}>30,000+</span>
+              <span className={styles.statLabel}>Happy Customers</span>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.right}>
+          <SparkleIcon className={`${styles.sparkle} ${styles.sparkleTop}`} />
+          <SparkleIcon className={`${styles.sparkle} ${styles.sparkleMiddle}`} />
+          <img 
+            src="../../../public/images/hero_background.png" 
+            alt="Fashion models" 
+            className={styles.heroImage}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hero

frontend/src/pages/Home/Home.tsx

@@ -1,9 +1,15 @@
 import AnnouncementBar from '../../components/AnnouncementBar/AnnouncementBar'
+import Header from '../../components/Header/Header'
+import Hero from '../../components/Hero/Hero'
 
 function Home() {
   return (
     <>
       <AnnouncementBar />
+
+      <Header />
+
+      <Hero />
     </>
   )
 }

frontend/src/shared/navigation/navigation.data.ts

@@ -0,0 +1,33 @@
+import type { NavigationItem } from './navigation.types'
+
+export const navigationItems: NavigationItem[] = [
+  {
+    label: 'Shop',
+    children: [
+      {
+        label: 'All',
+        href: '/shop',
+      },
+      {
+        label: 'Men',
+        href: '/shop/men',
+      },
+      {
+        label: 'Women',
+        href: '/shop/women',
+      },
+    ],
+  },
+  {
+    label: 'On Sale',
+    href: '/sale',
+  },
+  {
+    label: 'New Arrivals',
+    href: '/new-arrivals',
+  },
+  {
+    label: 'Brands',
+    href: '/brands',
+  },
+]

frontend/src/shared/navigation/navigation.types.ts

@@ -0,0 +1,5 @@
+export type NavigationItem = {
+  label: string
+  href?: string
+  children?: NavigationItem[]
+}

frontend/src/styles/globals.css

@@ -17,3 +17,14 @@ body {
     color: #000;
     font-family: "integralcf", sans-serif;
 }
+
+.container {
+  width: 100%;
+  max-width: 1240px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 24px;
+
+  display: flex;
+  align-items: center;
+}