Подготовили структуру для корзины

src/components/card/cart/index.jsx

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

src/components/card/product/index.jsx

@@ -1,6 +1,6 @@
 import styles from './index.module.scss'
 
-import WishIcon from '../../assets/icons/wish.svg'
+import WishIcon from '../../../assets/icons/wish.svg'
 
 const ProductCard = ({ name, price, imageUrl }) => {
 	return (

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

@@ -1,4 +1,4 @@
-@use '../../assets/styles/variables' as *;
+@use '../../../assets/styles/variables' as *;
 
 .product {
 	display: flex;

src/components/list/cart/index.jsx

@@ -0,0 +1,14 @@
+import CartItem from '../../card/cart'
+import styles from './index.module.scss'
+
+const CartList = () => {
+	return (
+		<ul>
+			<li>
+				<CartItem />
+			</li>
+		</ul>
+	)
+}
+
+export default CartList

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

@@ -0,0 +1,34 @@
+.table {
+	width: 100%;
+	border: none;
+	margin-bottom: 20px;
+}
+.table thead th {
+	font-weight: bold;
+	text-align: left;
+	border: none;
+	padding: 10px 15px;
+	background: #d8d8d8;
+	font-size: 14px;
+	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/components/list/product/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './index.module.scss'
 
-import ProductCard from '../card'
+import ProductCard from '../../card/product'
 
 const ProductList = () => {
 	const [products, setProducts] = React.useState([])

src/pages/cart/index.jsx

@@ -1,5 +1,15 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header'
+import CartList from '../../components/list/cart'
+
 const Cart = () => {
-	return <></>
+	return (
+		<div className={styles.container}>
+			<Header />
+			<CartList />
+		</div>
+	)
 }
 
 export default Cart

src/pages/cart/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}

src/pages/catalog/index.jsx

@@ -1,7 +1,7 @@
 import styles from './index.module.scss'
 
 import Header from '../../components/header/index'
-import ProductList from '../../components/list/index'
+import ProductList from '../../components/list/product/index'
 
 const Catalog = () => {
 	return (