Products.jsx

<div className="products">
              <ul className="flex cards">
                {products.map((product, index) => (
                  <li key={index}>
                    <h2>{product.name}</h2>
                    <div className="space3"></div>
                    {/* <img src={product.image} alt={product.name} /> */}
                    <div className="space"></div>
                    <div className="buy-product">
                      <button
                        onClick={() => (window.location.href = product.link)}
                        className="bottom-child"
                      >
                        Buy
                      </button>
                    </div>
                    <div className="price-colour bottom-child">
                      <h4>${product.cost}</h4>
                    </div>
                    <div className="cart-container">
                      <div className="space2"></div>
                      <div className="product-icon bottom-child">
                        <a className="cart" onClick={() => addToCart(product)}>
                          <FaCartPlus />
                        </a>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>