Сделали заголовок и добавили события

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-icons": "^5.6.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -2461,6 +2462,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -4,14 +4,15 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite", 
+    "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/App.jsx

@@ -1,14 +1,47 @@
 import styles from './App.module.css'
 import SneakersImage from './assets/images/sneakers-image.jpg'
+import { FaRegUser } from 'react-icons/fa'
+
+function handleClick(i) {
+    console.log(i);
+}
+
+function Header() {
+    const handleChange = event => {
+        const newValue = event.target.value;
+        console.log(`Новое значение ${newValue}`);
+    }
+    return (
+		<header className={styles.header}>
+			<div>
+				<h2>Store</h2>
+				<input type='text	' placeholder='Search...' onChange={handleChange} />
+			</div>
+			<div>
+				<FaRegUser size={24} color='#3258e3' />
+				<button>Profile</button>
+			</div>
+		</header>
+	)
+}
 
 function Product() {
+    const handlerMouseEnter = event => {
+        const img = event.target;
+        img.style.border = '5px solid yellow';
+    }
+    const handlerMouseOut = event => {
+        const img = event.target;
+        img.style.border = '';
+        console.log(event);
+    }
 	return (
 		<div className={styles.product}>
-			<img src={SneakersImage} alt='' />
+			<img src={SneakersImage} alt='' onMouseEnter={handlerMouseEnter} onMouseOut={handlerMouseOut} />
 			<div className={styles.content}>
 				<div className={styles.title}>
 					<h4>Sneakers Red & White 2025</h4>
-					<button>+</button>
+					<button onClick={() => handleClick(0)} onMouseEnter={handlerMouseEnter} onMouseOut={handlerMouseOut}>+</button>
 				</div>
 				<p className={styles.description}>NIKE</p>
 				<p className={styles.price}>$38.00</p>
@@ -21,6 +54,7 @@ function App() {
 	return (
 		<>
 			<div className={styles.container}>
+			<Header />
 				<ul className={styles.list}>
 					<li>
 						<Product />

src/App.module.css

@@ -1,3 +1,63 @@
+@use './assets/styles/variables' as *;
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	padding: 20px;
+	background-color: white;
+
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+
+	div {
+		&:first-child {
+			display: flex;
+			align-items: center;
+			gap: 20px;
+
+			h2 {
+				color: $primary-color;
+			}
+
+			input {
+				border-radius: 5px;
+				outline: none;
+				font-size: 16px;
+				border: 1px solid gainsboro;
+				padding: 5px 10px;
+
+				&:focus {
+					border: 1px solid $primary-color;
+				}
+			}
+		}
+
+		&:last-child {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+
+			button {
+				outline: 0;
+				border: 0;
+				border-radius: 5px;
+				padding: 5px 15px;
+				font-size: 16px;
+				background-color: $primary-color;
+				color: $white-color;
+				font-weight: 600;
+				cursor: pointer;
+
+				&:hover {
+					background-color: $seconday-color;
+				}
+			}
+		}
+	}
+}
+
 .container {
 	max-width: 1220px;
 	margin: 0 auto;
@@ -40,7 +100,7 @@
 		background-color: black;
 		color: white;
 		border: 0;
-		border-radius: 100%;
+		border-radius: 50%;
 		outline: 0;
 
 		font-size: 20px;