styling: more stuff

shopping-cart/public/shopping_cart_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z"/></svg>

shopping-cart/src/Cart.jsx

@@ -62,6 +62,7 @@ function OrderSummary({ cart }) {
       </p>
       <p>Shipping (10%): ${currencyFormat(shippingFee)}</p>
       <p>Total: ${currencyFormat(total)}</p>
+      <button>Checkout</button>
     </div>
   );
 }
@@ -71,7 +72,7 @@ function CartItem({ item, cart, setCart }) {
 
   return (
     <div className={styles.cartItem}>
-      <img className={styles.img} src={image} alt={title} />
+      <img id={styles.img} src={image} alt={title} />
       <div className={styles.card}>
         <div>
           <h3>{title}</h3>

shopping-cart/src/components/button.jsx

@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+import styles from "./button.module.css";
+
+export default function Button(props) {
+  return (
+    <button
+      onClick={props.onClick}
+      className={props.styles ? styles[props.styles] : styles["btn"]}
+    >
+      {props.text}
+    </button>
+  );
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+  text: PropTypes.string,
+  styles: PropTypes.string,
+};

shopping-cart/src/components/button.module.css

@@ -0,0 +1,8 @@
+.btn {
+  padding: 1rem;
+  margin: 1rem;
+}
+
+.action {
+  color: red;
+}

shopping-cart/src/components/main.jsx

@@ -1,6 +1,8 @@
+import Button from "./button";
+import { Link } from "react-router-dom";
 import styles from "./main.module.css";
 
-export default function Main(props) {
+export default function Main() {
   return (
     <main>
       <Default />
@@ -10,13 +12,18 @@ export default function Main(props) {
 
 function Default() {
   return (
-    <div>
-      <h1 className={styles.mainHeading}>We help you skill up faster</h1>
+    <div className={styles.container}>
+      <h1 className={styles.mainHeading}>
+        Our products help you skill up faster
+      </h1>
       <p>
         Trying to pivot into tech? There&apos;s a lot to figure out. We can help
-        you navigate the path. Fast results and guaranteed growth.
+        you navigate the path with our products. Fast results and guaranteed
+        growth.
       </p>
-      <button>BOOK INTRO CALL</button>
+      <Link to="/store">
+        <Button text={"Start shopping now!"} styles={"action"} />
+      </Link>
     </div>
   );
 }

shopping-cart/src/components/main.module.css

@@ -1,3 +1,10 @@
 main {
   padding: 0 1rem;
 }
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+}

shopping-cart/src/css/cart.module.css

@@ -34,7 +34,22 @@
 .cartItem {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  background-color: gray;
+  justify-items: center;
+  padding: 2rem 0;
+  position: relative;
+}
+
+.cartItem::after {
+  content: "";
+  position: absolute;
+  border-bottom: solid black;
+  margin: auto;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  width: 50%;
+  border-bottom: 1px solid black;
 }
 
 .qtybtn {
@@ -47,12 +62,12 @@
   margin: 0.5rem;
 }
 
-.img {
-  width: 100%;
+#img {
+  max-width: 100%;
   max-height: 300px;
-  vertical-align: middle;
   object-fit: contain;
-  float: left;
+  border-radius: 2rem;
+  align-self: center;
 }
 
 .header {