Сверстали страницу корзины

package-lock.json

@@ -8,10 +8,11 @@
 			"name": "store-client",
 			"version": "0.0.0",
 			"dependencies": {
+				"json-server": "^1.0.0-beta.3",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
 				"react-icons": "^5.5.0",
-				"react-router-dom": "^7.6.3",
+				"react-router-dom": "^7.7.1",
 				"sass-embedded": "^1.89.2"
 			},
 			"devDependencies": {
@@ -1026,6 +1027,12 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.29",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"license": "MIT"
+		},
 		"node_modules/@rolldown/pluginutils": {
 			"version": "1.0.0-beta.9",
 			"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.9.tgz",
@@ -1313,6 +1320,244 @@
 				"win32"
 			]
 		},
+		"node_modules/@tinyhttp/accepts": {
+			"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.0.4",
+				"negotiator": "^0.6.3"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+			}
+		},
+		"node_modules/@tinyhttp/app": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-2.5.2.tgz",
+			"integrity": "sha512-DcB3Y8GQppLQlO2VxRYF7LzTEAoZb+VRQXuIsErcu2fNaM1xdx6NQZDso5rlZUiaeg6KYYRfU34N4XkZbv6jSA==",
+			"license": "MIT",
+			"dependencies": {
+				"@tinyhttp/cookie": "2.1.1",
+				"@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": ">=14.21.3"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+			}
+		},
+		"node_modules/@tinyhttp/content-disposition": {
+			"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.20.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+			}
+		},
+		"node_modules/@tinyhttp/content-type": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/content-type/-/content-type-0.1.4.tgz",
+			"integrity": "sha512-dl6f3SHIJPYbhsW1oXdrqOmLSQF/Ctlv3JnNfXAE22kIP7FosqJHxkz/qj2gv465prG8ODKH5KEyhBkvwrueKQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.4"
+			}
+		},
+		"node_modules/@tinyhttp/cookie": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/cookie/-/cookie-2.1.1.tgz",
+			"integrity": "sha512-h/kL9jY0e0Dvad+/QU3efKZww0aTvZJslaHj3JTPmIPC9Oan9+kYqmh3M6L5JUQRuTJYFK2nzgL2iJtH2S+6dA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+			}
+		},
+		"node_modules/@tinyhttp/cookie-signature": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/cookie-signature/-/cookie-signature-2.1.1.tgz",
+			"integrity": "sha512-VDsSMY5OJfQJIAtUgeQYhqMPSZptehFSfvEEtxr+4nldPA8IImlp3QVcOVuK985g4AFR4Hl1sCbWCXoqBnVWnw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/cors": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.1.tgz",
+			"integrity": "sha512-qrmo6WJuaiCzKWagv2yA/kw6hIISfF/hOqPWwmI6w0o8apeTMmRN3DoCFvQ/wNVuWVdU5J4KU7OX8aaSOEq51A==",
+			"license": "MIT",
+			"dependencies": {
+				"@tinyhttp/vary": "^0.1.3"
+			},
+			"engines": {
+				"node": ">=12.20 || 14.x || >=16"
+			}
+		},
+		"node_modules/@tinyhttp/encode-url": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.1.1.tgz",
+			"integrity": "sha512-AhY+JqdZ56qV77tzrBm0qThXORbsVjs/IOPgGCS7x/wWnsa/Bx30zDUU/jPAUcSzNOzt860x9fhdGpzdqbUeUw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/etag": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/etag/-/etag-2.1.2.tgz",
+			"integrity": "sha512-j80fPKimGqdmMh6962y+BtQsnYPVCzZfJw0HXjyH70VaJBHLKGF+iYhcKqzI3yef6QBNa8DKIPsbEYpuwApXTw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/forwarded": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/forwarded/-/forwarded-2.1.2.tgz",
+			"integrity": "sha512-9H/eulJ68ElY/+zYpTpNhZ7vxGV+cnwaR6+oQSm7bVgZMyuQfgROW/qvZuhmgDTIxnGMXst+Ba4ij6w6Krcs3w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/logger": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/logger/-/logger-2.1.0.tgz",
+			"integrity": "sha512-Ma1fJ9CwUbn9r61/4HW6+nflsVoslpOnCrfQ6UeZq7GGIgwLzofms3HoSVG7M+AyRMJpxlfcDdbH5oFVroDMKA==",
+			"license": "MIT",
+			"dependencies": {
+				"colorette": "^2.0.20",
+				"dayjs": "^1.11.13",
+				"http-status-emojis": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=14.18 || >=16.20"
+			}
+		},
+		"node_modules/@tinyhttp/proxy-addr": {
+			"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",
+				"ipaddr.js": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/req": {
+			"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.2.3",
+				"@tinyhttp/type-is": "2.2.4",
+				"@tinyhttp/url": "2.1.1",
+				"header-range-parser": "^1.1.3"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/res": {
+			"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.2",
+				"@tinyhttp/cookie": "2.1.1",
+				"@tinyhttp/cookie-signature": "2.1.1",
+				"@tinyhttp/encode-url": "2.1.1",
+				"@tinyhttp/req": "2.2.5",
+				"@tinyhttp/send": "2.2.3",
+				"@tinyhttp/vary": "^0.1.3",
+				"es-escape-html": "^0.1.1",
+				"mime": "4.0.4"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/router": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.3.tgz",
+			"integrity": "sha512-O0MQqWV3Vpg/uXsMYg19XsIgOhwjyhTYWh51Qng7bxqXixxx2PEvZWnFjP7c84K7kU/nUX41KpkEBTLnznk9/Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/send": {
+			"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.0.4"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/type-is": {
+			"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.0.4"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/url": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/url/-/url-2.1.1.tgz",
+			"integrity": "sha512-POJeq2GQ5jI7Zrdmj22JqOijB5/GeX+LEX7DUdml1hUnGbJOTWDx7zf2b5cCERj7RoXL67zTgyzVblBJC+NJWg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/@tinyhttp/vary": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/@tinyhttp/vary/-/vary-0.1.3.tgz",
+			"integrity": "sha512-SoL83sQXAGiHN1jm2VwLUWQSQeDAAl1ywOm6T0b0Cg1CZhVsjoiZadmjhxF6FHCCY7OHHVaLnTgSMxTPIDLxMg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20"
+			}
+		},
 		"node_modules/@types/babel__core": {
 			"version": "7.20.5",
 			"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1581,6 +1826,21 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/chokidar": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14.16.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1601,6 +1861,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/colorette": {
+			"version": "2.0.20",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+			"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",
@@ -1652,6 +1918,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/dayjs": {
+			"version": "1.11.13",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+			"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+			"license": "MIT"
+		},
 		"node_modules/debug": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -1677,6 +1949,21 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/dot-prop": {
+			"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": "^4.18.2"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.5.165",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.165.tgz",
@@ -1684,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",
@@ -1926,6 +2222,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/eta": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/eta/-/eta-3.5.0.tgz",
+			"integrity": "sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/eta-dev/eta?sponsor=1"
+			}
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2073,6 +2381,21 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/header-range-parser": {
+			"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"
+			}
+		},
+		"node_modules/http-status-emojis": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/http-status-emojis/-/http-status-emojis-2.2.0.tgz",
+			"integrity": "sha512-ompKtgwpx8ff0hsbpIB7oE4ax1LXoHmftsHHStMELX56ivG3GhofTX8ZHWlUaFKfGjcGjw6G3rPk7dJRXMmbbg==",
+			"license": "MIT"
+		},
 		"node_modules/ignore": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2116,6 +2439,24 @@
 				"node": ">=0.8.19"
 			}
 		},
+		"node_modules/inflection": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.2.tgz",
+			"integrity": "sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==",
+			"license": "MIT",
+			"engines": {
+				"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",
@@ -2193,6 +2534,45 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/json-server": {
+			"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": "^2.4.0",
+				"@tinyhttp/cors": "^2.0.1",
+				"@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": "^4.0.0",
+				"sirv": "^2.0.4",
+				"sort-on": "^6.1.0"
+			},
+			"bin": {
+				"json-server": "lib/bin.js"
+			},
+			"engines": {
+				"node": ">=18.3"
+			}
+		},
+		"node_modules/json-server/node_modules/chalk": {
+			"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"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
 		"node_modules/json-stable-stringify-without-jsonify": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -2204,7 +2584,6 @@
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
 			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"json5": "lib/cli.js"
@@ -2260,6 +2639,21 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/lowdb": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+			"integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+			"license": "MIT",
+			"dependencies": {
+				"steno": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/typicode"
+			}
+		},
 		"node_modules/lru-cache": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2270,6 +2664,30 @@
 				"yallist": "^3.0.2"
 			}
 		},
+		"node_modules/milliparsec": {
+			"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": ">=20"
+			}
+		},
+		"node_modules/mime": {
+			"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"
+			],
+			"license": "MIT",
+			"bin": {
+				"mime": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=16"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2283,6 +2701,15 @@
 				"node": "*"
 			}
 		},
+		"node_modules/mrmime": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2316,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",
@@ -2516,9 +2952,9 @@
 			}
 		},
 		"node_modules/react-router": {
-			"version": "7.6.3",
+			"version": "7.7.1",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.3.tgz",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz",
-			"integrity": "sha512-zf45LZp5skDC6I3jDLXQUu0u26jtuP4lEGbc7BbdyxenBN1vJSTA18czM2D+h5qyMBuMrD+9uB+mU37HIoKGRA==",
+			"integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==",
 			"license": "MIT",
 			"dependencies": {
 				"cookie": "^1.0.1",
@@ -2538,12 +2974,12 @@
 			}
 		},
 		"node_modules/react-router-dom": {
-			"version": "7.6.3",
+			"version": "7.7.1",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.3.tgz",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz",
-			"integrity": "sha512-DiWJm9qdUAmiJrVWaeJdu4TKu13+iB/8IEi0EW/XgaHCjW/vWGrwzup0GVvaMteuZjKnh5bEvJP/K0MDnzawHw==",
+			"integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==",
 			"license": "MIT",
 			"dependencies": {
-				"react-router": "7.6.3"
+				"react-router": "7.7.1"
 			},
 			"engines": {
 				"node": ">=20.0.0"
@@ -2553,6 +2989,28 @@
 				"react-dom": ">=18"
 			}
 		},
+		"node_modules/readdirp": {
+			"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": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/regexparam": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+			"integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2975,6 +3433,35 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/sirv": {
+			"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",
+				"mrmime": "^2.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/sort-on": {
+			"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": "^9.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2985,6 +3472,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/steno": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+			"integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/typicode"
+			}
+		},
 		"node_modules/strip-json-comments": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3049,6 +3548,15 @@
 				"url": "https://github.com/sponsors/SuperchupuDev"
 			}
 		},
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/tslib": {
 			"version": "2.8.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -3068,6 +3576,18 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/type-fest": {
+			"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)",
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

package.json

@@ -11,10 +11,11 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"json-server": "^1.0.0-beta.3",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
-		"react-router-dom": "^7.6.3",
+		"react-router-dom": "^7.7.1",
 		"sass-embedded": "^1.89.2"
 	},
 	"devDependencies": {

src/components/OrderDetail.jsx

@@ -0,0 +1,30 @@
+import styles from './OrderDetail.module.scss'
+
+const OrderDetail = () => {
+	return (
+		<div className={styles.detail}>
+			<h2>Order Summary</h2>
+			<div className={styles.stats}>
+				<div>
+					<p>Subtotal</p>
+					<span>$565</span>
+				</div>
+				<div>
+					<p>Discount (-20%)</p>
+					<span>-$113</span>
+				</div>
+				<div>
+					<p>Delivery Fee</p>
+					<span>$15</span>
+				</div>
+			</div>
+			<div className={styles.total}>
+				<p>Total</p>
+				<span>$467</span>
+			</div>
+			<button>Go to Checkout</button>
+		</div>
+	)
+}
+
+export default OrderDetail

src/components/OrderDetail.module.scss

@@ -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;
+	}
+}

src/components/card/cart/index.jsx

@@ -1,16 +1,20 @@
 import styles from './index.module.scss'
 import JacketImage from '../../../assets/images/products/jacket.svg'
+import TrashIcon from '../../../assets/icons/trash.svg'
 
 const CartItem = () => {
 	return (
 		<div className={styles.item}>
+			<button className={styles.trash}>
+				<img src={TrashIcon} alt='' />
+			</button>
 			<div className={styles.image}>
 				<img src={JacketImage} alt='' />
 			</div>
 			<div className={styles.content}>
 				<h2>Quilted Satin Jacket</h2>
-				<div>
+				<div className={styles.wrapper}>
-					<span>$145</span>
+					<span className={styles.price}>$145</span>
 					<div className={styles.buttons}>
 						<button>-</button>
 						<span>1</span>

src/components/card/cart/index.module.scss

@@ -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;
+			}
+		}
+	}
+}

src/components/list/cart/index.jsx

@@ -3,7 +3,13 @@ import styles from './index.module.scss'
 
 const CartList = () => {
 	return (
-		<ul>
+		<ul className={styles.list}>
+			<li>
+				<CartItem />
+			</li>
+			<li>
+				<CartItem />
+			</li>
 			<li>
 				<CartItem />
 			</li>

src/components/list/cart/index.module.scss

@@ -1,34 +1,13 @@
-.table {
+.list {
-	width: 100%;
+	display: flex;
-	border: none;
+	border: 1px solid gainsboro;
-	margin-bottom: 20px;
+	border-radius: 20px;
-}
+	padding: 20px;
-.table thead th {
+	margin-top: 24px;
-	font-weight: bold;
+	list-style: none;
-	text-align: left;
+
-	border: none;
+	max-width: 715px;
-	padding: 10px 15px;
+	flex-direction: column;
-	background: #d8d8d8;
+
-	font-size: 14px;
+	flex-basis: 80%;
-	border-left: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-}
-.table tbody td {
-	text-align: left;
-	border-left: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-	padding: 10px 15px;
-	font-size: 14px;
-	vertical-align: top;
-}
-.table thead tr th:first-child,
-.table tbody tr td:first-child {
-	border-left: none;
-}
-.table thead tr th:last-child,
-.table tbody tr td:last-child {
-	border-right: none;
-}
-.table tbody tr:nth-child(even) {
-	background: #f3f3f3;
 }

src/pages/cart/index.jsx

@@ -2,12 +2,17 @@ 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>
 	)
 }