Сделали стикер на корзину

2026-06-20 14:22:46 +03:00 · 2026-06-20 14:22:18 +03:00
50 changed files with 4699 additions and 3583 deletions
@@ -1,22 +1,70 @@
 {
-    "advertisement": [
+  "products": [
    {
-            "id":1,
-            "name":"Продаю голодного кота!",
-            "description":"Кот бегемот. Прокормить невозможно!",
-            "url":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqlWZ1N8qSUMB1HuqN6DjnXP_D5NRGNJ-W6zLZqP-Y9Q&s=10"
+      "id": "1",
+      "name": "Breed Dry Dog Food",
+      "price": 100,
+      "imageUrl": "./src/assets/images/products/dog-food.svg"
    },
    {
-            "id":2,
-            "name":"Продаю машину",
-            "description":"Не бита не крашена без пробега по РФ",
-            "url":"https://s0.rbk.ru/v6_top_pics/media/img/9/33/347054091401339.jpeg"
+      "id": "2",
+      "name": "CANON EOS DSLR Camera",
+      "price": 360,
+      "imageUrl": "./src/assets/images/products/camera.svg"
    },
    {
-            "id":3,
-            "name":"Продаю квартиру",
-            "description":"Центр города, с видом на море.",
-            "url":"https://hoff.ru/upload/medialibrary/11c/11cb47c1d2d4f248b7dde57f479f2d47.jpg"
+      "id": "3",
+      "name": "ASUS FHD Gaming Laptop",
+      "price": 700,
+      "imageUrl": "./src/assets/images/products/laptop.svg"
+    },
+    {
+      "id": "4",
+      "name": "Curology Product Set ",
+      "price": 500,
+      "imageUrl": "./src/assets/images/products/curoset.svg"
+    },
+    {
+      "id": "5",
+      "name": "Kids Electric Car",
+      "price": 960,
+      "imageUrl": "./src/assets/images/products/car.svg"
+    },
+    {
+      "id": "6",
+      "name": "Jr. Zoom Soccer Cleats",
+      "price": 1160,
+      "imageUrl": "./src/assets/images/products/soccer.svg"
+    },
+    {
+      "id": "7",
+      "name": "GP11 Shooter USB Gamepad",
+      "price": 660,
+      "imageUrl": "./src/assets/images/products/gamepad.svg"
+    },
+    {
+      "id": "8",
+      "name": "Quilted Satin Jacket",
+      "price": 660,
+      "imageUrl": "./src/assets/images/products/jacket.svg"
+    }
+  ],
+  "cart": [
+    {
+      "id": "f7d5",
+      "productId": "1",
+      "name": "Breed Dry Dog Food",
+      "price": 100,
+      "imageUrl": "./src/assets/images/products/dog-food.svg",
+      "quantity": 3
+    },
+    {
+      "id": "bb06",
+      "productId": "2",
+      "name": "CANON EOS DSLR Camera",
+      "price": 360,
+      "imageUrl": "./src/assets/images/products/camera.svg",
+      "quantity": 1
    }
  ]
 }
@@ -3,8 +3,23 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Vite + React</title>
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+
+				font-family: 'Poppins', sans-serif;
+			}
+		</style>
 	</head>
 	<body>
 		<div id="root"></div>
@@ -8,10 +8,12 @@
 			"name": "store-client",
 			"version": "0.0.0",
 			"dependencies": {
-        "json-server": "^1.0.0-beta.15",
+				"json-server": "^1.0.0-beta.3",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
-        "react-router-dom": "^7.18.0"
+				"react-icons": "^5.5.0",
+				"react-router-dom": "^7.7.1",
+				"sass-embedded": "^1.89.2"
 			},
 			"devDependencies": {
 				"@eslint/js": "^9.25.0",
@@ -321,6 +323,12 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@bufbuild/protobuf": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.5.2.tgz",
+			"integrity": "sha512-foZ7qr0IsUBjzWIq+SuBLfdQCpJ1j8cTuNNT4owngTHoN5KsJb8L9t65fzz7SCeSWzescoOil/0ldqiL041ABg==",
+			"license": "(Apache-2.0 AND BSD-3-Clause)"
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.25.5",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
@@ -1313,15 +1321,16 @@
 			]
 		},
 		"node_modules/@tinyhttp/accepts": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/accepts/-/accepts-2.3.0.tgz",
-      "integrity": "sha512-hdKkMGAUqnagpWO1R8rVBYqbu4sWQ2Fo682gkJmO0nl54DPvnzxx81b2WZtV3VwB7EdLfUoasj2BAkyTcyZ5aw==",
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/accepts/-/accepts-2.2.3.tgz",
+			"integrity": "sha512-9pQN6pJAJOU3McmdJWTcyq7LLFW8Lj5q+DadyKcvp+sxMkEpktKX5sbfJgJuOvjk6+1xWl7pe0YL1US1vaO/1w==",
 			"license": "MIT",
 			"dependencies": {
-        "mime": "4.1.0"
+				"mime": "4.0.4",
+				"negotiator": "^0.6.3"
 			},
 			"engines": {
-        "node": ">=14.13.1"
+				"node": ">=12.20.0"
 			},
 			"funding": {
 				"type": "individual",
@@ -1329,21 +1338,21 @@
 			}
 		},
 		"node_modules/@tinyhttp/app": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-3.0.7.tgz",
-      "integrity": "sha512-btit/gSWisksJ19crNLct1mwZvX+/AYwh/H1x8SB/VGDmNFkSsdRDZaa54wW1Eq3bM7mCIr7+l7Oh3tAi/C+Bw==",
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-2.5.2.tgz",
+			"integrity": "sha512-DcB3Y8GQppLQlO2VxRYF7LzTEAoZb+VRQXuIsErcu2fNaM1xdx6NQZDso5rlZUiaeg6KYYRfU34N4XkZbv6jSA==",
 			"license": "MIT",
 			"dependencies": {
-        "@tinyhttp/accepts": "^2.3.0",
 				"@tinyhttp/cookie": "2.1.1",
-        "@tinyhttp/proxy-addr": "3.0.1",
-        "@tinyhttp/req": "2.2.8",
-        "@tinyhttp/res": "2.2.11",
-        "@tinyhttp/router": "2.2.5",
+				"@tinyhttp/proxy-addr": "2.2.1",
+				"@tinyhttp/req": "2.2.5",
+				"@tinyhttp/res": "2.2.5",
+				"@tinyhttp/router": "2.2.3",
+				"header-range-parser": "1.1.3",
 				"regexparam": "^2.0.2"
 			},
 			"engines": {
-        "node": ">=16.10.0"
+				"node": ">=14.21.3"
 			},
 			"funding": {
 				"type": "individual",
@@ -1351,12 +1360,12 @@
 			}
 		},
 		"node_modules/@tinyhttp/content-disposition": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/content-disposition/-/content-disposition-2.2.4.tgz",
-      "integrity": "sha512-5Kc5CM2Ysn3vTTArBs2vESUt0AQiWZA86yc1TI3B+lxXmtEq133C1nxXNOgnzhrivdPZIh3zLj5gDnZjoLL5GA==",
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/content-disposition/-/content-disposition-2.2.2.tgz",
+			"integrity": "sha512-crXw1txzrS36huQOyQGYFvhTeLeG0Si1xu+/l6kXUVYpE0TjFjEZRqTbuadQLfKGZ0jaI+jJoRyqaWwxOSHW2g==",
 			"license": "MIT",
 			"engines": {
-        "node": ">=12.17.0"
+				"node": ">=12.20.0"
 			},
 			"funding": {
 				"type": "individual",
@@ -1448,88 +1457,87 @@
 			}
 		},
 		"node_modules/@tinyhttp/proxy-addr": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/proxy-addr/-/proxy-addr-3.0.1.tgz",
-      "integrity": "sha512-vP0JVsy9ZMIldsaP/QHdMF+sb3B6wn7e2QXRdqpX/Cqz1ie35Am29DK88DeVmiwdTQle3FtYaVNtU3RgTGYZ+w==",
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/proxy-addr/-/proxy-addr-2.2.1.tgz",
+			"integrity": "sha512-BicqMqVI91hHq2BQmnqJUh0FQUnx7DncwSGgu2ghlh+JZG2rHK2ZN/rXkfhrx1rrUw6hnd0L36O8GPMh01+dDQ==",
 			"license": "MIT",
 			"dependencies": {
-        "@tinyhttp/forwarded": "2.1.2"
+				"@tinyhttp/forwarded": "2.1.2",
+				"ipaddr.js": "^2.2.0"
 			},
 			"engines": {
-        "node": ">=16.10.0"
+				"node": ">=12.20.0"
 			}
 		},
 		"node_modules/@tinyhttp/req": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/req/-/req-2.2.8.tgz",
-      "integrity": "sha512-HCsceFNgMpssUsnRao16iJyyfdWRwKlhL7OMTPUEjZsZGREnBzpjlrPHA31G5xNNzR7XOWVXDXGyrGgSpcwGSA==",
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/req/-/req-2.2.5.tgz",
+			"integrity": "sha512-trfsXwtmsNjMcGKcLJ+45h912kLRqBQCQD06ams3Tq0kf4gHLxjHjoYOC1Z9yGjOn81XllRx8wqvnvr+Kbe3gw==",
 			"license": "MIT",
 			"dependencies": {
-        "@tinyhttp/accepts": "2.3.0",
-        "@tinyhttp/type-is": "2.2.5",
+				"@tinyhttp/accepts": "2.2.3",
+				"@tinyhttp/type-is": "2.2.4",
 				"@tinyhttp/url": "2.1.1",
 				"header-range-parser": "^1.1.3"
 			},
 			"engines": {
-        "node": ">=14.13.1"
+				"node": ">=12.20.0"
 			}
 		},
 		"node_modules/@tinyhttp/res": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/res/-/res-2.2.11.tgz",
-      "integrity": "sha512-t7GJzjqpG2svJ11RYvqaYU+xTV9MsEr0usbTIAWa5B8d7IIzpMC6AlT2K6wCIu1XGUYRpZY7qMM5cMgluvsfeg==",
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/res/-/res-2.2.5.tgz",
+			"integrity": "sha512-yBsqjWygpuKAVz4moWlP4hqzwiDDqfrn2mA0wviJAcgvGiyOErtlQwXY7aj3aPiCpURvxvEFO//Gdy6yV+xEpA==",
 			"license": "MIT",
 			"dependencies": {
-        "@tinyhttp/content-disposition": "2.2.4",
+				"@tinyhttp/content-disposition": "2.2.2",
 				"@tinyhttp/cookie": "2.1.1",
 				"@tinyhttp/cookie-signature": "2.1.1",
 				"@tinyhttp/encode-url": "2.1.1",
-        "@tinyhttp/req": "2.2.8",
-        "@tinyhttp/send": "2.2.5",
+				"@tinyhttp/req": "2.2.5",
+				"@tinyhttp/send": "2.2.3",
 				"@tinyhttp/vary": "^0.1.3",
-        "mime": "4.1.0"
+				"es-escape-html": "^0.1.1",
+				"mime": "4.0.4"
 			},
 			"engines": {
-        "node": ">=14.13.1"
+				"node": ">=12.20.0"
 			}
 		},
 		"node_modules/@tinyhttp/router": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.5.tgz",
-      "integrity": "sha512-HI9Mpo9+IVpCzx/36okjJvtvifBSh3Ufhl9n1vylAbNLEykceJiMBkr06+W0qqRlo8TiZeUtg2XinEJu+GFcRA==",
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.3.tgz",
+			"integrity": "sha512-O0MQqWV3Vpg/uXsMYg19XsIgOhwjyhTYWh51Qng7bxqXixxx2PEvZWnFjP7c84K7kU/nUX41KpkEBTLnznk9/Q==",
 			"license": "MIT",
-      "dependencies": {
-        "regexparam": "^2.0.2"
-      },
 			"engines": {
-        "node": ">=14.0.0"
+				"node": ">=12.20.0"
 			}
 		},
 		"node_modules/@tinyhttp/send": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/send/-/send-2.2.5.tgz",
-      "integrity": "sha512-XhBwziPOCydOJzb9rVw0xuKX6HmMA0gXKHHqec7V97jU6JtSCCIvwW2FBMh/XrG9S5W8DRETroPohASrIwf7Uw==",
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/send/-/send-2.2.3.tgz",
+			"integrity": "sha512-o4cVHHGQ8WjVBS8UT0EE/2WnjoybrfXikHwsRoNlG1pfrC/Sd01u1N4Te8cOd/9aNGLr4mGxWb5qTm2RRtEi7g==",
 			"license": "MIT",
 			"dependencies": {
 				"@tinyhttp/content-type": "^0.1.4",
 				"@tinyhttp/etag": "2.1.2",
-        "mime": "4.1.0"
+				"mime": "4.0.4"
 			},
 			"engines": {
-        "node": ">=14.13.1"
+				"node": ">=12.20.0"
 			}
 		},
 		"node_modules/@tinyhttp/type-is": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@tinyhttp/type-is/-/type-is-2.2.5.tgz",
-      "integrity": "sha512-BCPEB+NV8v/9lzEE9GbfRPAKVsyayp84m6SSWn70j8yFkPBXeuVeq004pwVrjW1CRdmAZz9ZSH147pqqzAdr5g==",
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/type-is/-/type-is-2.2.4.tgz",
+			"integrity": "sha512-7F328NheridwjIfefBB2j1PEcKKABpADgv7aCJaE8x8EON77ZFrAkI3Rir7pGjopV7V9MBmW88xUQigBEX2rmQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@tinyhttp/content-type": "^0.1.4",
-        "mime": "4.1.0"
+				"mime": "4.0.4"
 			},
 			"engines": {
-        "node": ">=14.13.1"
+				"node": ">=12.20.0"
 			}
 		},
 		"node_modules/@tinyhttp/url": {
@@ -1764,6 +1772,12 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
+		"node_modules/buffer-builder": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+			"integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+			"license": "MIT/X11"
+		},
 		"node_modules/callsites": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1813,15 +1827,15 @@
 			}
 		},
 		"node_modules/chokidar": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
-      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
 			"license": "MIT",
 			"dependencies": {
-        "readdirp": "^5.0.0"
+				"readdirp": "^4.0.1"
 			},
 			"engines": {
-        "node": ">= 20.19.0"
+				"node": ">= 14.16.0"
 			},
 			"funding": {
 				"url": "https://paulmillr.com/funding/"
@@ -1853,6 +1867,12 @@
 			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
 			"license": "MIT"
 		},
+		"node_modules/colorjs.io": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+			"integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+			"license": "MIT"
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1868,16 +1888,12 @@
 			"license": "MIT"
 		},
 		"node_modules/cookie": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
-      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+			"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
 			}
 		},
 		"node_modules/cross-spawn": {
@@ -1903,9 +1919,9 @@
 			"license": "MIT"
 		},
 		"node_modules/dayjs": {
-      "version": "1.11.21",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
-      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+			"version": "1.11.13",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+			"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
 			"license": "MIT"
 		},
 		"node_modules/debug": {
@@ -1934,15 +1950,15 @@
 			"license": "MIT"
 		},
 		"node_modules/dot-prop": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-10.1.0.tgz",
-      "integrity": "sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==",
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
+			"integrity": "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==",
 			"license": "MIT",
 			"dependencies": {
-        "type-fest": "^5.0.0"
+				"type-fest": "^4.18.2"
 			},
 			"engines": {
-        "node": ">=20"
+				"node": ">=18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
@@ -1955,6 +1971,15 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/es-escape-html": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/es-escape-html/-/es-escape-html-0.1.1.tgz",
+			"integrity": "sha512-yUx1o+8RsG7UlszmYPtks+dm6Lho2m8lgHMOsLJQsFI0R8XwUJwiMhM1M4E/S8QLeGyf6MkDV/pWgjQ0tdTSyQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.x"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.25.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
@@ -2198,15 +2223,15 @@
 			}
 		},
 		"node_modules/eta": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eta/-/eta-4.6.0.tgz",
-      "integrity": "sha512-lW6is4T1NFOYnmqGZIfvixqj7A7sSvScF+DN8EK6K58xI5MZ5UvYe0GjopxOXQtZvUn4eDdVuZ8XSoYWTMEKwA==",
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/eta/-/eta-3.5.0.tgz",
+			"integrity": "sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==",
 			"license": "MIT",
 			"engines": {
-        "node": ">=20"
+				"node": ">=6.0.0"
 			},
 			"funding": {
-        "url": "https://github.com/bgub/eta?sponsor=1"
+				"url": "https://github.com/eta-dev/eta?sponsor=1"
 			}
 		},
 		"node_modules/fast-deep-equal": {
@@ -2351,16 +2376,15 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
 		},
 		"node_modules/header-range-parser": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/header-range-parser/-/header-range-parser-1.1.5.tgz",
-      "integrity": "sha512-n5JOx67HBL0MGqtu6NFoEYWb+xDYAOgBI5dBkyMDff1xHbhGnjCMglj1aiMNPHps6HwXO+2i5jbPU/zJSk7etQ==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/header-range-parser/-/header-range-parser-1.1.3.tgz",
+			"integrity": "sha512-B9zCFt3jH8g09LR1vHL4pcAn8yMEtlSlOUdQemzHMRKMImNIhhszdeosYFfNW0WXKQtXIlWB+O4owHJKvEJYaA==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=12.22.0"
@@ -2382,6 +2406,12 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+			"integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+			"license": "MIT"
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -2418,6 +2448,15 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/ipaddr.js": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+			"integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2496,36 +2535,36 @@
 			"license": "MIT"
 		},
 		"node_modules/json-server": {
-      "version": "1.0.0-beta.15",
-      "resolved": "https://registry.npmjs.org/json-server/-/json-server-1.0.0-beta.15.tgz",
-      "integrity": "sha512-I5UB/OWHLGoQW9IVld2yzZFYYiGYNBn2OYRlGbkfj5xDidT26yKYkV7Sr093zJtPh9zbofaLgyT89Ov5U0RRBQ==",
-      "license": "MIT",
+			"version": "1.0.0-beta.3",
+			"resolved": "https://registry.npmjs.org/json-server/-/json-server-1.0.0-beta.3.tgz",
+			"integrity": "sha512-DwE69Ep5ccwIJZBUIWEENC30Yj8bwr4Ax9W9VoIWAYnB8Sj4ReptscO8/DRHv/nXwVlmb3Bk73Ls86+VZdYkkA==",
+			"license": "SEE LICENSE IN ./LICENSE",
 			"dependencies": {
-        "@tinyhttp/app": "^3.0.1",
+				"@tinyhttp/app": "^2.4.0",
 				"@tinyhttp/cors": "^2.0.1",
-        "@tinyhttp/logger": "^2.1.0",
-        "chalk": "^5.6.2",
-        "chokidar": "^5.0.0",
-        "dot-prop": "^10.1.0",
-        "eta": "^4.5.0",
-        "inflection": "^3.0.2",
+				"@tinyhttp/logger": "^2.0.0",
+				"chalk": "^5.3.0",
+				"chokidar": "^4.0.1",
+				"dot-prop": "^9.0.0",
+				"eta": "^3.5.0",
+				"inflection": "^3.0.0",
 				"json5": "^2.2.3",
 				"lowdb": "^7.0.1",
-        "milliparsec": "^5.1.0",
-        "sirv": "^3.0.2",
-        "sort-on": "^7.0.0"
+				"milliparsec": "^4.0.0",
+				"sirv": "^2.0.4",
+				"sort-on": "^6.1.0"
 			},
 			"bin": {
 				"json-server": "lib/bin.js"
 			},
 			"engines": {
-        "node": ">=22.12.0"
+				"node": ">=18.3"
 			}
 		},
 		"node_modules/json-server/node_modules/chalk": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+			"integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
 			"license": "MIT",
 			"engines": {
 				"node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -2626,18 +2665,18 @@
 			}
 		},
 		"node_modules/milliparsec": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/milliparsec/-/milliparsec-5.1.1.tgz",
-      "integrity": "sha512-jkEDaSWZp4/Q3vprqdqukBqUEyNNqC1pwTjZ5cp9YkaR1wv5fvTCd8VFsecbw7i8DNBGjzhJ83MDoPZlcTaPQg==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/milliparsec/-/milliparsec-4.0.0.tgz",
+			"integrity": "sha512-/wk9d4Z6/9ZvoEH/6BI4TrTCgmkpZPuSRN/6fI9aUHOfXdNTuj/VhLS7d+NqG26bi6L9YmGXutVYvWC8zQ0qtA==",
 			"license": "MIT",
 			"engines": {
-        "node": ">=18.13 || >=19.20 || >=20"
+				"node": ">=20"
 			}
 		},
 		"node_modules/mime": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-4.1.0.tgz",
-      "integrity": "sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==",
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-4.0.4.tgz",
+			"integrity": "sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==",
 			"funding": [
 				"https://github.com/sponsors/broofa"
 			],
@@ -2704,6 +2743,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/negotiator": {
+			"version": "0.6.4",
+			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+			"integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/node-releases": {
 			"version": "2.0.19",
 			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -2884,6 +2932,15 @@
 				"react": "^19.1.0"
 			}
 		},
+		"node_modules/react-icons": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+			"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+			"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",
@@ -2895,9 +2952,9 @@
 			}
 		},
 		"node_modules/react-router": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.0.tgz",
-      "integrity": "sha512-pTTGt8J+ji1NOmYnjzT+bAJy/1zD+Jp4ziO6cL7T3ZLvXKtusO7BpFqlRXitqpcPVqllsIXFHRMt+2/k3Xn6HQ==",
+			"version": "7.7.1",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz",
+			"integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==",
 			"license": "MIT",
 			"dependencies": {
 				"cookie": "^1.0.1",
@@ -2917,12 +2974,12 @@
 			}
 		},
 		"node_modules/react-router-dom": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.0.tgz",
-      "integrity": "sha512-Fi0yY6kgtKae/Th2xibdWK0KSdYZ4B53Gyf6wRtomOKWgpNm7H7+DyfDhncdz9FKbpS+1jmDhg3F4WoGJ+yFOA==",
+			"version": "7.7.1",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz",
+			"integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==",
 			"license": "MIT",
 			"dependencies": {
-        "react-router": "7.18.0"
+				"react-router": "7.7.1"
 			},
 			"engines": {
 				"node": ">=20.0.0"
@@ -2933,12 +2990,12 @@
 			}
 		},
 		"node_modules/readdirp": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
-      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
 			"license": "MIT",
 			"engines": {
-        "node": ">= 20.19.0"
+				"node": ">= 14.18.0"
 			},
 			"funding": {
 				"type": "individual",
@@ -3011,6 +3068,326 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/rxjs": {
+			"version": "7.8.2",
+			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+			"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.1.0"
+			}
+		},
+		"node_modules/sass-embedded": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.89.2.tgz",
+			"integrity": "sha512-Ack2K8rc57kCFcYlf3HXpZEJFNUX8xd8DILldksREmYXQkRHI879yy8q4mRDJgrojkySMZqmmmW1NxrFxMsYaA==",
+			"license": "MIT",
+			"dependencies": {
+				"@bufbuild/protobuf": "^2.5.0",
+				"buffer-builder": "^0.2.0",
+				"colorjs.io": "^0.5.0",
+				"immutable": "^5.0.2",
+				"rxjs": "^7.4.0",
+				"supports-color": "^8.1.1",
+				"sync-child-process": "^1.0.2",
+				"varint": "^6.0.0"
+			},
+			"bin": {
+				"sass": "dist/bin/sass.js"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"optionalDependencies": {
+				"sass-embedded-android-arm": "1.89.2",
+				"sass-embedded-android-arm64": "1.89.2",
+				"sass-embedded-android-riscv64": "1.89.2",
+				"sass-embedded-android-x64": "1.89.2",
+				"sass-embedded-darwin-arm64": "1.89.2",
+				"sass-embedded-darwin-x64": "1.89.2",
+				"sass-embedded-linux-arm": "1.89.2",
+				"sass-embedded-linux-arm64": "1.89.2",
+				"sass-embedded-linux-musl-arm": "1.89.2",
+				"sass-embedded-linux-musl-arm64": "1.89.2",
+				"sass-embedded-linux-musl-riscv64": "1.89.2",
+				"sass-embedded-linux-musl-x64": "1.89.2",
+				"sass-embedded-linux-riscv64": "1.89.2",
+				"sass-embedded-linux-x64": "1.89.2",
+				"sass-embedded-win32-arm64": "1.89.2",
+				"sass-embedded-win32-x64": "1.89.2"
+			}
+		},
+		"node_modules/sass-embedded-android-arm": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.89.2.tgz",
+			"integrity": "sha512-oHAPTboBHRZlDBhyRB6dvDKh4KvFs+DZibDHXbkSI6dBZxMTT+Yb2ivocHnctVGucKTLQeT7+OM5DjWHyynL/A==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-arm64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.89.2.tgz",
+			"integrity": "sha512-+pq7a7AUpItNyPu61sRlP6G2A8pSPpyazASb+8AK2pVlFayCSPAEgpwpCE9A2/Xj86xJZeMizzKUHxM2CBCUxA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-riscv64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.89.2.tgz",
+			"integrity": "sha512-HfJJWp/S6XSYvlGAqNdakeEMPOdhBkj2s2lN6SHnON54rahKem+z9pUbCriUJfM65Z90lakdGuOfidY61R9TYg==",
+			"cpu": [
+				"riscv64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-x64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.89.2.tgz",
+			"integrity": "sha512-BGPzq53VH5z5HN8de6jfMqJjnRe1E6sfnCWFd4pK+CAiuM7iw5Fx6BQZu3ikfI1l2GY0y6pRXzsVLdp/j4EKEA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-arm64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.89.2.tgz",
+			"integrity": "sha512-UCm3RL/tzMpG7DsubARsvGUNXC5pgfQvP+RRFJo9XPIi6elopY5B6H4m9dRYDpHA+scjVthdiDwkPYr9+S/KGw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-x64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.89.2.tgz",
+			"integrity": "sha512-D9WxtDY5VYtMApXRuhQK9VkPHB8R79NIIR6xxVlN2MIdEid/TZWi1MHNweieETXhWGrKhRKglwnHxxyKdJYMnA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.89.2.tgz",
+			"integrity": "sha512-leP0t5U4r95dc90o8TCWfxNXwMAsQhpWxTkdtySDpngoqtTy3miMd7EYNYd1znI0FN1CBaUvbdCMbnbPwygDlA==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.89.2.tgz",
+			"integrity": "sha512-2N4WW5LLsbtrWUJ7iTpjvhajGIbmDR18ZzYRywHdMLpfdPApuHPMDF5CYzHbS+LLx2UAx7CFKBnj5LLjY6eFgQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.89.2.tgz",
+			"integrity": "sha512-Z6gG2FiVEEdxYHRi2sS5VIYBmp17351bWtOCUZ/thBM66+e70yiN6Eyqjz80DjL8haRUegNQgy9ZJqsLAAmr9g==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.89.2.tgz",
+			"integrity": "sha512-nTyuaBX6U1A/cG7WJh0pKD1gY8hbg1m2SnzsyoFG+exQ0lBX/lwTLHq3nyhF+0atv7YYhYKbmfz+sjPP8CZ9lw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-riscv64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.89.2.tgz",
+			"integrity": "sha512-N6oul+qALO0SwGY8JW7H/Vs0oZIMrRMBM4GqX3AjM/6y8JsJRxkAwnfd0fDyK+aICMFarDqQonQNIx99gdTZqw==",
+			"cpu": [
+				"riscv64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-x64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.89.2.tgz",
+			"integrity": "sha512-K+FmWcdj/uyP8GiG9foxOCPfb5OAZG0uSVq80DKgVSC0U44AdGjvAvVZkrgFEcZ6cCqlNC2JfYmslB5iqdL7tg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-riscv64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.89.2.tgz",
+			"integrity": "sha512-g9nTbnD/3yhOaskeqeBQETbtfDQWRgsjHok6bn7DdAuwBsyrR3JlSFyqKc46pn9Xxd9SQQZU8AzM4IR+sY0A0w==",
+			"cpu": [
+				"riscv64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-x64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.89.2.tgz",
+			"integrity": "sha512-Ax7dKvzncyQzIl4r7012KCMBvJzOz4uwSNoyoM5IV6y5I1f5hEwI25+U4WfuTqdkv42taCMgpjZbh9ERr6JVMQ==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-arm64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.89.2.tgz",
+			"integrity": "sha512-j96iJni50ZUsfD6tRxDQE2QSYQ2WrfHxeiyAXf41Kw0V4w5KYR/Sf6rCZQLMTUOHnD16qTMVpQi20LQSqf4WGg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-x64": {
+			"version": "1.89.2",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.89.2.tgz",
+			"integrity": "sha512-cS2j5ljdkQsb4PaORiClaVYynE9OAPZG/XjbOMxpQmjRIf7UroY4PEIH+Waf+y47PfXFX9SyxhYuw2NIKGbEng==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"license": "MIT",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
 		"node_modules/scheduler": {
 			"version": "0.26.0",
 			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -3028,9 +3405,9 @@
 			}
 		},
 		"node_modules/set-cookie-parser": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
-      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
 			"license": "MIT"
 		},
 		"node_modules/shebang-command": {
@@ -3057,9 +3434,9 @@
 			}
 		},
 		"node_modules/sirv": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
-      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@polka/url": "^1.0.0-next.24",
@@ -3067,19 +3444,19 @@
 				"totalist": "^3.0.0"
 			},
 			"engines": {
-        "node": ">=18"
+				"node": ">= 10"
 			}
 		},
 		"node_modules/sort-on": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/sort-on/-/sort-on-7.0.0.tgz",
-      "integrity": "sha512-e+4RRxt7jsWdGPp4H5PKOER/ELYlemNB1plvW686Qi3j4WVaCjCpro2zaTD7Cn0VtBImq/hg3x1JfovMNXXfJQ==",
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/sort-on/-/sort-on-6.1.0.tgz",
+			"integrity": "sha512-WTECP0nYNWO1n2g5bpsV0yZN9cBmZsF8ThHFbOqVN0HBFRoaQZLLEMvMmJlKHNPYQeVngeI5+jJzIfFqOIo1OA==",
 			"license": "MIT",
 			"dependencies": {
-        "dot-prop": "^10.1.0"
+				"dot-prop": "^9.0.0"
 			},
 			"engines": {
-        "node": ">=20"
+				"node": ">=18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
@@ -3133,16 +3510,25 @@
 				"node": ">=8"
 			}
 		},
-    "node_modules/tagged-tag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
-      "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
+		"node_modules/sync-child-process": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
+			"integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+			"license": "MIT",
+			"dependencies": {
+				"sync-message-port": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/sync-message-port": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
+			"integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
 			"license": "MIT",
 			"engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+				"node": ">=16.0.0"
 			}
 		},
 		"node_modules/tinyglobby": {
@@ -3171,6 +3557,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
+		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3185,15 +3577,12 @@
 			}
 		},
 		"node_modules/type-fest": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.7.0.tgz",
-      "integrity": "sha512-1URUxUqfHFM1c+zfSPsa3gnkO7Aq21qyH75SIduNYz4SzY964rn1X2vCMQaHSHhktiw+0kPa2iyb6PUpXqB6Vg==",
+			"version": "4.41.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+			"integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
 			"license": "(MIT OR CC0-1.0)",
-      "dependencies": {
-        "tagged-tag": "^1.0.0"
-      },
 			"engines": {
-        "node": ">=20"
+				"node": ">=16"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
@@ -3240,6 +3629,12 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/varint": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+			"integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+			"license": "MIT"
+		},
 		"node_modules/vite": {
 			"version": "6.3.5",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -4,17 +4,19 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-    "server": "json-server db.json",
 		"dev": "vite",
+		"server": "json-server --watch db.json --port 8000",
 		"build": "vite build",
 		"lint": "eslint .",
 		"preview": "vite preview"
 	},
 	"dependencies": {
-    "json-server": "^1.0.0-beta.15",
+		"json-server": "^1.0.0-beta.3",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
-    "react-router-dom": "^7.18.0"
+		"react-icons": "^5.5.0",
+		"react-router-dom": "^7.7.1",
+		"sass-embedded": "^1.89.2"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.25.0",
@@ -1,12 +1,10 @@
-import { RouterProvider } from "react-router-dom";
-import { router } from './router'
-import Header from './components/Header/index'
+// удаляем все, оставляя лишь пустую функцию App ниже

 function App() {
 	return (
 		<>
-            <Header />
-			<RouterProvider router={router} />
+			{/* Добавьте тестовый контент для проверки */}
+			<h1>Hello, React!</h1>
 		</>
 	)
 }
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 27C11.5523 27 12 26.5523 12 26C12 25.4477 11.5523 25 11 25C10.4477 25 10 25.4477 10 26C10 26.5523 10.4477 27 11 27Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25 27C25.5523 27 26 26.5523 26 26C26 25.4477 25.5523 25 25 25C24.4477 25 24 25.4477 24 26C24 26.5523 24.4477 27 25 27Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 5H7L10 22H26" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 16.6667H25.59C25.7056 16.6667 25.8177 16.6267 25.9072 16.5535C25.9966 16.4802 26.0579 16.3782 26.0806 16.2648L27.8806 7.26479C27.8951 7.19222 27.8934 7.11733 27.8755 7.04552C27.8575 6.97371 27.8239 6.90678 27.7769 6.84956C27.73 6.79234 27.6709 6.74625 27.604 6.71462C27.5371 6.68299 27.464 6.66661 27.39 6.66666H8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 20L16.2223 16.2156M18.3158 11.1579C18.3158 13.0563 17.5617 14.8769 16.2193 16.2193C14.8769 17.5617 13.0563 18.3158 11.1579 18.3158C9.2595 18.3158 7.43886 17.5617 6.0965 16.2193C4.75413 14.8769 4 13.0563 4 11.1579C4 9.2595 4.75413 7.43886 6.0965 6.0965C7.43886 4.75413 9.2595 4 11.1579 4C13.0563 4 14.8769 4.75413 16.2193 6.0965C17.5617 7.43886 18.3158 9.2595 18.3158 11.1579V11.1579Z" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.57143H2.33333L3.66667 19H14.3333L15.6667 3.57143H1M9 7.42857V15.1429M12.3333 7.42857L11.6667 15.1429M5.66667 7.42857L6.33333 15.1429M6.33333 3.57143L7 1H11L11.6667 3.57143" stroke="black" stroke-width="1.56" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 27V24.3333C24 22.9188 23.5224 21.5623 22.6722 20.5621C21.8221 19.5619 20.669 19 19.4667 19H11.5333C10.331 19 9.17795 19.5619 8.32778 20.5621C7.47762 21.5623 7 22.9188 7 24.3333V27" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 14C18.9853 14 21 11.9853 21 9.5C21 7.01472 18.9853 5 16.5 5C14.0147 5 12 7.01472 12 9.5C12 11.9853 14.0147 14 16.5 14Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 1C2.7912 1 1 2.73964 1 4.88594C1 6.61852 1.7 10.7305 8.5904 14.8873C8.71383 14.961 8.85552 15 9 15C9.14448 15 9.28617 14.961 9.4096 14.8873C16.3 10.7305 17 6.61852 17 4.88594C17 2.73964 15.2088 1 13 1C10.7912 1 9 3.35511 9 3.35511C9 3.35511 7.2088 1 5 1Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 7C8.239 7 6 9.23669 6 11.9962C6 14.2238 6.875 19.5107 15.488 24.8551C15.6423 24.9499 15.8194 25 16 25C16.1806 25 16.3577 24.9499 16.512 24.8551C25.125 19.5107 26 14.2238 26 11.9962C26 9.23669 23.761 7 21 7C18.239 7 16 10.028 16 10.028C16 10.028 13.761 7 11 7Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+$white-color: white;
+$black-color: black;
+
+$primary-color: #db4444;
@@ -1,49 +0,0 @@
-import styles from './index.module.css'
-import { useState, useEffect } from 'react'
-
-export default function() {
-    const [data,setData] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    
-    useEffect(()=>{
-        const controller = new AbortController();
-        const fetchData = async () => {
-            try {
-                const response = await fetch('http://localhost:3000/advertisement', {
-                    signal: controller.signal // Link the abort signal to the fetch request
-                });
-        
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-        
-                const result = await response.json();
-                setData(result);
-            } catch (err) {
-                if (err.name !== 'AbortError') {
-                    setError(err.message);
-                }
-            } finally {
-                setLoading(false);
-            }
-        };
-        fetchData();
-        return () => controller.abort();
-    },[]);
-    
-    return (
-        <>
-            <div className={styles.container}>
-            {data.map(item => <div key={item.id} className={styles.card}>
-                <h3>{item.name}</h3>
-                <div 
-                    className={styles.img}
-                    style={{backgroundImage: `url(${item.url})`}}>
-                </div>
-                <p>{item.description}</p>
-                </div>)}
-            </div>
-        </>
-    )
-}
@@ -1,27 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    column-gap: 10px;
-}
-.card {
-    min-width: 100px;
-    min-height: 200px;
-    /*border: 1px solid black;*/
-    border-radius: 10px;
-    box-shadow: 2px 2px 5px 2px black;    
-}
-.card h3 {
-    text-align: center;
-}
-.card p {
-    margin: 5px 10px;
-}
-.img {
-    width: 200px;
-    height: 200px;
-    border-radius: 5px;
-    background-size: cover;
-    background-position: center;
-    margin: 0 auto;
-}
@@ -1,17 +0,0 @@
-import styles from './index.module.css'
-
-export default function() {
-    return (
-        <>
-            <header>
-                <nav>
-                    <ul className={styles.container}>
-                        <li><a href="/">Главная</a></li>
-                        <li><a href="/favorite">Избранное</a></li>
-                        <li><a href="/profile">Профиль</a></li>
-                    </ul>
-                </nav>
-            </header>
-        </>
-    )
-}
@@ -1,7 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    list-style: none;
-    column-gap: 1em;
-}
@@ -0,0 +1,41 @@
+import styles from './OrderDetail.module.scss'
+import { useCart } from '../hooks/useCart'
+
+const OrderDetail = () => {
+	const { cart } = useCart()
+
+	const subtotal = cart.reduce(
+		(acc, item) => acc + item.price * item.quantity,
+		0
+	)
+	const discount = subtotal * 0.2
+	const delivery = 15
+	const total = subtotal - discount + delivery
+
+	return (
+		<div className={styles.detail}>
+			<h2>Order Summary</h2>
+			<div className={styles.stats}>
+				<div>
+					<p>Subtotal</p>
+					<span>${subtotal}</span>
+				</div>
+				<div>
+					<p>Discount (-20%)</p>
+					<span>-${discount}</span>
+				</div>
+				<div>
+					<p>Delivery Fee</p>
+					<span>${delivery}</span>
+				</div>
+			</div>
+			<div className={styles.total}>
+				<p>Total</p>
+				<span>${total}</span>
+			</div>
+			<button>Go to Checkout</button>
+		</div>
+	)
+}
+
+export default OrderDetail
@@ -0,0 +1,67 @@
+@use '../assets/styles/variables' as *;
+
+.detail {
+	border: 1px solid gainsboro;
+	border-radius: 20px;
+
+	flex-basis: 50%;
+	margin-top: 24px;
+	padding: 20px;
+
+	display: flex;
+	flex-direction: column;
+
+	.stats {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		margin-top: 24px;
+		padding-bottom: 20px;
+
+		border-bottom: 1px solid gainsboro;
+		div {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			p {
+				color: gray;
+				font-size: 20px;
+			}
+
+			span {
+				font-size: 20px;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.total {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		p {
+			color: gray;
+			font-size: 20px;
+		}
+
+		span {
+			font-size: 20px;
+			font-weight: bold;
+			margin-top: 20px;
+		}
+	}
+
+	button {
+		outline: 0;
+		border: 0;
+		font-size: 16px;
+		padding: 20px;
+		border-radius: 62px;
+		background-color: $primary-color;
+		color: $white-color;
+		cursor: pointer;
+		margin-top: 24px;
+	}
+}
@@ -0,0 +1,41 @@
+import styles from './index.module.scss'
+import TrashIcon from '../../../assets/icons/trash.svg'
+import { useCart } from '../../../hooks/useCart'
+
+const CartItem = ({ item }) => {
+	const { removeFromCart, updateQuantity } = useCart()
+
+	const handleIncrement = () => {
+		updateQuantity(item.id, item.quantity + 1)
+	}
+
+	const handleDecrement = () => {
+		if (item.quantity > 1) {
+			updateQuantity(item.id, item.quantity - 1)
+		}
+	}
+
+	return (
+		<div className={styles.item}>
+			<button className={styles.trash} onClick={() => removeFromCart(item.id)}>
+				<img src={TrashIcon} alt='Удалить' />
+			</button>
+			<div className={styles.image}>
+				<img src={item.imageUrl} alt={item.name} />
+			</div>
+			<div className={styles.content}>
+				<h2>{item.name}</h2>
+				<div className={styles.wrapper}>
+					<span className={styles.price}>${item.price}</span>
+					<div className={styles.buttons}>
+						<button onClick={handleDecrement}>-</button>
+						<span>{item.quantity}</span>
+						<button onClick={handleIncrement}>+</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default CartItem
@@ -0,0 +1,62 @@
+.item {
+	border-bottom: 1px solid #dcdcdc;
+	padding: 24px 0;
+	position: relative;
+
+	.trash {
+		outline: 0;
+		border: 0;
+		background-color: white;
+		position: absolute;
+
+		top: 20px;
+		right: 20px;
+
+		cursor: pointer;
+	}
+
+	.image {
+		background-color: #f5f5f5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 35px;
+		height: 124px;
+		width: 124px;
+
+		img {
+			width: 90px;
+			object-fit: contain;
+		}
+	}
+
+	.wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.price {
+			font-size: 24px;
+		}
+
+		.buttons {
+			display: flex;
+			background-color: #f0f0f0;
+			padding: 12px 20px;
+			gap: 20px;
+			border-radius: 62px;
+			align-items: center;
+
+			span {
+				font-size: 14px;
+			}
+
+			button {
+				outline: 0;
+				border: 0;
+				font-size: 16px;
+				cursor: pointer;
+			}
+		}
+	}
+}
@@ -0,0 +1,33 @@
+import styles from './index.module.scss'
+import WishIcon from '../../../assets/icons/wish.svg'
+import { useCart } from '../../../hooks/useCart'
+
+const ProductCard = ({ id, name, price, imageUrl }) => {
+	const { addToCart } = useCart()
+
+	const handleAdd = () => {
+		addToCart({ id, name, price, imageUrl })
+	}
+
+	return (
+		<div className={styles.product}>
+			<div className={styles.image}>
+				<img src={imageUrl} alt={name} />
+				<div className={styles.buttons}>
+					<button onClick={handleAdd}>В корзину</button>
+					<button>
+						<img src={WishIcon} alt='Избранное' />
+					</button>
+				</div>
+			</div>
+			<div className={styles.content}>
+				<h4>{name}</h4>
+				<div className={styles.stats}>
+					<span>${price}</span>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default ProductCard
@@ -0,0 +1,48 @@
+@use '../../../assets/styles/variables' as *;
+
+.product {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 270px;
+
+	.image {
+		background-color: #f5f5f5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 35px;
+		height: 250px;
+		position: relative;
+
+		.buttons {
+			position: absolute;
+			top: 12px;
+			right: 12px;
+
+			button {
+				display: flex;
+				outline: 0;
+				border: 0;
+				border-radius: 50%;
+				padding: 10px;
+				background-color: white;
+
+				cursor: pointer;
+			}
+		}
+	}
+
+	.content {
+		h4 {
+			font-size: 16px;
+		}
+
+		.stats {
+			span {
+				font-size: 16px;
+				color: $primary-color;
+			}
+		}
+	}
+}
@@ -0,0 +1,57 @@
+import styles from './index.module.scss'
+
+import CartIcon from '../../assets/icons/cart.svg'
+import UserIcon from '../../assets/icons/user.svg'
+import WishlistIcon from '../../assets/icons/wishlist.svg'
+import LoopIcon from '../../assets/icons/loop.svg'
+import { Link } from 'react-router-dom'
+import { useCart } from '../../hooks/useCart'
+
+const Header = () => {
+    const { cart, loading, error } = useCart()
+	return (
+		<header className={styles.header}>
+			<h2>Exclusive</h2>
+			<nav>
+				<ul>
+					<li>
+						<Link to={{ pathname: '/' }}>Home</Link>
+					</li>
+					<li>
+						<Link to={{ pathname: '/contact' }}>Contact</Link>
+					</li>
+					<li>
+						<Link to={{ pathname: '/about' }}>About</Link>
+					</li>
+					<li>
+						<a href='#'>Sign Up</a>
+					</li>
+				</ul>
+			</nav>
+			<div className={styles.search}>
+				<input type='text' placeholder='What are you looking for?' />
+				<img src={LoopIcon} alt='' />
+			</div>
+			<div className={styles.buttons}>
+				<button>
+					<Link to={{ pathname: '/wishlist' }}>
+						<img src={WishlistIcon} alt='' />
+					</Link>
+				</button>
+				<button>
+					<Link to={{ pathname: '/cart' }}>
+					    <div className={styles.cart}>
+						    <img src={CartIcon} alt='' className={styles.img} />
+                            {cart && cart.length > 0 ? <div className={styles.sticker}>{cart.length}</div> : ''}
+                        </div>
+					</Link>
+				</button>
+				<button>
+					<img src={UserIcon} alt='' />
+				</button>
+			</div>
+		</header>
+	)
+}
+
+export default Header
@@ -0,0 +1,85 @@
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid gainsboro;
+    padding: 30px 0;
+
+    h2 {
+        font-size: 24px;
+    }
+
+    ul {
+        list-style: none;
+        display: flex;
+        gap: 48px;
+
+        a {
+            color: black;
+            text-decoration: none;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    }
+
+    .search {
+        display: flex;
+        align-items: center;
+        background-color: #f5f5f5;
+        padding: 7px 12px;
+        gap: 35px;
+
+        input {
+            outline: 0;
+            border: 0;
+            background-color: #f5f5f5;
+            font-size: 12px;
+        }
+
+        img {
+            cursor: pointer;
+        }
+    }
+
+    .buttons {
+        display: flex;
+        gap: 16px;
+
+        button {
+            background: none;
+            outline: 0;
+            border: 0;
+            cursor: pointer;
+        }
+    }
+
+    .cart {
+        position: relative;
+        display: inline-block;
+        border-radius: 12px;
+        /*overflow: hidden;*/
+    }
+
+    .sticker {
+        position: absolute;
+        top: 15px;
+        /* отступ сверху */
+        left: 15px;
+        /* отступ слева */
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
+        /* Градиент стикера */
+        color: #ffffff;
+        padding: 6px 10px 6px 10px;
+        border-radius: 20px;
+        /* Округление стикера */
+        box-shadow: 0 4px 12px rgba(255, 65, 108, 0.4);
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.5px;
+        z-index: 10;
+    }
+}
@@ -0,0 +1,22 @@
+import CartItem from '../../card/cart'
+import styles from './index.module.scss'
+import { useCart } from '../../../hooks/useCart'
+
+const CartList = () => {
+	const { cart, loading, error } = useCart()
+
+	if (loading) return <p>Загрузка корзины...</p>
+	if (error) return <p>Ошибка: {error}</p>
+
+	return (
+		<ul className={styles.list}>
+			{cart.map(item => (
+				<li key={item.id}>
+					<CartItem item={item} />
+				</li>
+			))}
+		</ul>
+	)
+}
+
+export default CartList
@@ -0,0 +1,13 @@
+.list {
+	display: flex;
+	border: 1px solid gainsboro;
+	border-radius: 20px;
+	padding: 20px;
+	margin-top: 24px;
+	list-style: none;
+
+	max-width: 715px;
+	flex-direction: column;
+
+	flex-basis: 80%;
+}
@@ -0,0 +1,34 @@
+import styles from './index.module.scss'
+import ProductCard from '../../card/product'
+import { useProducts } from '../../../hooks/useProducts'
+
+const ProductList = () => {
+	const { products, loading, error } = useProducts()
+
+	if (loading) {
+		return <div className={styles.loading}>Загрузка продуктов...</div>
+	}
+
+	if (error) {
+		return (
+			<div className={styles.error}>
+				<p>Ошибка при загрузке продуктов: {error}</p>
+				<button onClick={() => window.location.reload()}>
+					Попробовать снова
+				</button>
+			</div>
+		)
+	}
+
+	return (
+		<ul className={styles.list}>
+			{products.map(product => (
+				<li key={product.id}>
+					<ProductCard {...product} />
+				</li>
+			))}
+		</ul>
+	)
+}
+
+export default ProductList
@@ -0,0 +1,7 @@
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding-top: 60px;
+	gap: 30px;
+}
@@ -0,0 +1,48 @@
+import React from 'react'
+import { CartService } from '../services/CartService'
+
+export function useCart() {
+	const [cart, setCart] = React.useState([])
+	const [loading, setLoading] = React.useState(true)
+	const [error, setError] = React.useState(null)
+
+	const fetchCart = React.useCallback(async () => {
+		try {
+			setLoading(true)
+			const data = await CartService.getCart()
+			setCart(data)
+		} catch (err) {
+			setError(err.message)
+		} finally {
+			setLoading(false)
+		}
+	}, [])
+
+	const addToCart = async product => {
+		await CartService.addToCart(product)
+		await fetchCart()
+	}
+
+	const removeFromCart = async id => {
+		await CartService.removeFromCart(id)
+		await fetchCart()
+	}
+
+	const updateQuantity = async (id, quantity) => {
+		await CartService.updateQuantity(id, quantity)
+		await fetchCart()
+	}
+
+	React.useEffect(() => {
+		fetchCart()
+	}, [fetchCart])
+
+	return {
+		cart,
+		loading,
+		error,
+		addToCart,
+		removeFromCart,
+		updateQuantity,
+	}
+}
@@ -0,0 +1,42 @@
+import React from 'react'
+import { fetchProducts } from '../services/ProductService'
+
+export function useProducts() {
+	const [products, setProducts] = React.useState([])
+	const [loading, setLoading] = React.useState(true)
+	const [error, setError] = React.useState(null)
+
+	React.useEffect(() => {
+		let cancelled = false
+
+		const loadProducts = async () => {
+			try {
+				setLoading(true)
+				setError(null)
+
+				const data = await fetchProducts()
+
+				if (!cancelled) {
+					setProducts(data)
+				}
+			} catch (err) {
+				if (!cancelled) {
+					setError(err.message)
+					setProducts([])
+				}
+			} finally {
+				if (!cancelled) {
+					setLoading(false)
+				}
+			}
+		}
+
+		loadProducts()
+
+		return () => {
+			cancelled = true
+		}
+	}, [])
+
+	return { products, loading, error }
+}
@@ -1,10 +1,20 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-// удаляем import './index.css'
-import App from './App.jsx'
+import {
+	BrowserRouter as Router,
+	Routes,
+	Route,
+	Navigate,
+} from 'react-router-dom'
+
+import Catalog from './pages/catalog'
+import Cart from './pages/cart'

 createRoot(document.getElementById('root')).render(
-	<StrictMode>
-		<App />
-	</StrictMode>
+	<Router>
+		<Routes>
+			<Route path='/' element={<Navigate to='/catalog' replace />} />
+			<Route path='/catalog' element={<Catalog />} />
+			<Route path='/cart' element={<Cart />} />
+		</Routes>
+	</Router>
 )
@@ -1,7 +0,0 @@
-export default function() {
-    return (
-        <>
-            <h1>Error</h1>
-        </>
-    )
-}
@@ -1,7 +0,0 @@
-export default function() {
-    return (
-        <>
-            <h1>Favorites</h1>
-        </>
-    )
-}
@@ -1,12 +0,0 @@
-import AdvList from '../components/AdvList/index'
-
-export default function() {
-    return (
-        <>
-        <h1>Main</h1>
-        <div>
-            <AdvList />
-        </div>
-        </>
-    )
-}
@@ -1,7 +0,0 @@
-export default function() {
-    return (
-        <>
-        <h1>Profile</h1>
-        </>
-    )
-}
@@ -0,0 +1,20 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header'
+import CartList from '../../components/list/cart'
+import OrderDetail from '../../components/OrderDetail'
+
+const Cart = () => {
+	return (
+		<div className={styles.container}>
+			<Header />
+			<h1 style={{ marginTop: 24 }}>Your Cart</h1>
+			<div style={{ display: 'flex', gap: 20 }}>
+				<CartList />
+				<OrderDetail />
+			</div>
+		</div>
+	)
+}
+
+export default Cart
@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}
@@ -0,0 +1,15 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+import ProductList from '../../components/list/product/index'
+
+const Catalog = () => {
+	return (
+		<div className={styles.container}>
+			<Header />
+			<ProductList />
+		</div>
+	)
+}
+
+export default Catalog
@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}
@@ -1,28 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom'
-import MainPage from './pages/Main'
-import ErrorPage from './pages/Error'
-import FavoritePage from './pages/Favorites'
-import ProfilePage from './pages/Profile'
-
-export const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <MainPage />,
-        errorElement: <ErrorPage />,
-        children: [
-            {
-                path: "/",
-                element: <MainPage />,
-                loader: async () => fetch("/api/dashboard-data"),
-            },
-        ]
-    },
-    {
-        path: "/favorite",
-        element: <FavoritePage />
-    },
-    {
-        path: "/profile",
-        element: <ProfilePage />
-    }    
-]);
@@ -0,0 +1,53 @@
+const BASE_URL = 'http://localhost:8000/cart'
+
+export const CartService = {
+	async getCart() {
+		const response = await fetch(BASE_URL)
+		if (!response.ok) throw new Error('Ошибка при получении корзины')
+		return response.json()
+	},
+    async getCartCount() {
+		const response = await fetch(BASE_URL)
+		if (!response.ok) throw new Error('Ошибка при получении корзины')
+		return response.json().length
+	},
+	async addToCart(product) {
+		const existing = await fetch(`${BASE_URL}?productId=${product.id}`)
+		const data = await existing.json()
+
+		if (data.length > 0) {
+			const current = data[0]
+			return fetch(`${BASE_URL}/${current.id}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ quantity: current.quantity + 1 }),
+			})
+		} else {
+			return fetch(BASE_URL, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					productId: product.id,
+					name: product.name,
+					price: product.price,
+					imageUrl: product.imageUrl,
+					quantity: 1,
+				}),
+			})
+		}
+	},
+
+	async updateQuantity(id, quantity) {
+		return fetch(`${BASE_URL}/${id}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ quantity }),
+		})
+	},
+
+	async removeFromCart(id) {
+		return fetch(`${BASE_URL}/${id}`, {
+			method: 'DELETE',
+		})
+	},
+}
@@ -0,0 +1,15 @@
+const API_URL = 'http://localhost:8000/products'
+
+export async function fetchProducts() {
+	try {
+		const response = await fetch(API_URL)
+
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`)
+		}
+
+		return await response.json()
+	} catch (error) {
+		throw new Error(error.message || 'Ошибка при загрузке продуктов')
+	}
+}
Author	SHA1	Message	Date
laktionov-as	7ed8f4ce9e	Сделали стикер на корзину	2026-06-20 14:22:46 +03:00
laktionov-as	32bb365db4	Сделали стикер на корзину	2026-06-20 14:22:18 +03:00