changes

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

@@ -1,6 +1,10 @@
 .btn {
   padding: 1rem;
   margin: 1rem;
+  font-size: 1rem;
+  border-radius: 0.5rem;
+  border: none;
+  cursor: pointer;
 }
 
 .action {

shopping-cart/src/components/main.jsx

@@ -12,18 +12,22 @@ export default function Main() {
 
 function Default() {
   return (
-    <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 with our products. Fast results and guaranteed
-        growth.
-      </p>
-      <Link to="/store">
-        <Button text={"Start shopping now!"} styles={"action"} />
-      </Link>
-    </div>
+    <>
+      <div className={styles.container}>
+        <h1 className={styles.mainHeading}>
+          Our products help <span className={styles["heading-color"]}>you</span>{" "}
+        </h1>
+        <p className={styles["sub-heading"]}>
+          Keep engineers happy using working technology. Fast results and
+          guaranteed value from day one.
+        </p>
+        <Link to="/store">
+          <Button text={"Start shopping now!"} />
+        </Link>
+        <div>
+          <img src="/hero.jpg" alt="" className={styles["hero-img"]} />
+        </div>
+      </div>
+    </>
   );
 }

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

@@ -5,6 +5,29 @@ main {
 .container {
   display: flex;
   flex-direction: column;
-  justify-content: start;
+  justify-content: center;
   align-items: center;
+  height: 100vh;
+}
+
+.mainHeading {
+  font-size: 4rem;
+  margin: 0;
+}
+
+.sub-heading {
+  font-size: 1.5rem;
+}
+
+.heading-color {
+  color: #0e6c96;
+}
+
+.hero-img {
+  margin-top: 100px;
+  width: 100%;
+  max-height: 800px;
+  vertical-align: middle;
+  object-fit: contain;
+  float: left;
 }

shopping-cart/src/components/navbar.jsx

@@ -1,35 +1,42 @@
 import styles from "./navbar.module.css";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
 
 export default function Navbar({ cartItems }) {
   const sumCartItems = Object.keys(cartItems).length;
 
   return (
     <nav className={styles.container}>
-      <h1>Smig.Tech</h1>
-      <Nav />
-      {sumCartItems > 0 ? (
-        <Link to="bag">
-          {" "}
-          <h1>{sumCartItems}</h1>
-        </Link>
-      ) : (
-        <img src="/shopping_cart_icon.svg" />
-      )}
+      <h1 className={styles["nav-heading"]}>Hobby Tech</h1>
+      <Nav sumCartItems={sumCartItems} />
     </nav>
   );
 }
 
-function Nav() {
+function Nav({ sumCartItems }) {
   return (
     <ul className={styles.nav}>
       <li>
-        <Link to="/">home</Link>
+        <Link to="/" className={styles.link}>
+          home
+        </Link>
       </li>
       <li>
-        <Link to="store">shop</Link>
+        <Link to="store" className={styles.link}>
+          shop
+        </Link>
       </li>
+      <Link to="bag" className={styles.link}>
+        {sumCartItems > 0 ? (
+          <div className={styles["cart-icon-container"]}>
+            <div className={styles["cart-icon-circle"]}></div>
+            <ShoppingCartIcon fontSize="large" />
+          </div>
+        ) : (
+          <ShoppingCartIcon fontSize="large" />
+        )}
+      </Link>
     </ul>
   );
 }
@@ -37,3 +44,7 @@ function Nav() {
 Navbar.propTypes = {
   cartItems: PropTypes.object,
 };
+
+Nav.propTypes = {
+  sumCartItems: PropTypes.number,
+};

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

@@ -15,3 +15,28 @@
   margin-left: auto;
   align-self: center;
 }
+
+.link {
+  text-decoration: none;
+  font-size: 1.5rem;
+  color: #0e374e;
+}
+
+.nav-heading {
+  color: #0e374e;
+}
+
+.cart-icon-container {
+  position: relative;
+}
+
+.cart-icon-circle {
+  background: #85d5f4;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  top: 7px;
+  left: 10px;
+  opacity: 60%;
+}

shopping-cart/src/components/productCollection.jsx

@@ -11,7 +11,10 @@ export default function ProductCollection({ loading, items, cart, setCart }) {
             return (
               <div key={index} className={styles.card}>
                 <Products item={item} cart={cart} setCart={setCart} />
-                <Link to={item.id}> More Info</Link>
+                <Link to={item.id} className={styles.link}>
+                  {" "}
+                  More Info
+                </Link>
               </div>
             );
           })

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

@@ -12,5 +12,18 @@
   justify-content: end;
   padding: 1.5rem;
   margin: 1.5rem;
-  background: gray;
+  background: #e2f3fc;
+  border-radius: 1rem;
+  text-align: center;
+}
+
+.link {
+  text-decoration: none;
+  color: #0e374e;
+  font-weight: 600;
+  transition: font-weight 500ms;
+}
+
+.link:hover {
+  font-weight: 900;
 }

shopping-cart/src/components/productDetails.jsx

@@ -1,4 +1,5 @@
 import { useParams, useOutletContext, Link } from "react-router-dom";
+import Button from "./button";
 import Products from "./products";
 
 import styles from "./productDetails.module.css";
@@ -15,18 +16,23 @@ export default function ProductDetails() {
     <div className={styles.container}>
       {item ? (
         <div className={styles.card}>
-          <Link to="/store">Back</Link>
+          <Link to="/store" className={styles.link}>
+            Back
+          </Link>
           <Products item={item} cart={cart} setCart={setCart} />
-          <button
+          <Button
             onClick={() => {
               cart[item.id]
                 ? removeFromCart(item, cart, setCart)
                 : addToCart(item, cart, setCart);
             }}
-          >
-            {cart[item.id] ? "Remove from Cart" : "Add to Cart"}
-          </button>
-          <Link to="/bag">View Cart</Link>
+            text={cart[item.id] ? "Remove from Cart" : "Add to Cart"}
+          />
+          {Object.keys(cart).length > 0 ? (
+            <Link to="/bag" className={styles.link}>
+              View Cart
+            </Link>
+          ) : null}
         </div>
       ) : (
         <HandleInvalidItem />

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

@@ -4,6 +4,7 @@
   justify-content: center;
   flex-wrap: wrap;
   align-items: stretch;
+  text-align: center;
 }
 .card {
   display: flex;
@@ -13,4 +14,16 @@
   /*flex: 1;*/
   padding: 1.5rem;
   margin: 1.5rem;
+  border-radius: 1rem;
+}
+
+.link {
+  text-decoration: none;
+  color: #0e374e;
+  font-weight: 600;
+  transition: font-weight 500ms;
+}
+
+.link:hover {
+  font-weight: 900;
 }

shopping-cart/src/components/products.jsx

@@ -4,7 +4,7 @@ import styles from "./products.module.css";
 
 import { currencyFormat } from "../utils/currency";
 
-export default function Products({ item, cart, setCart }) {
+export default function Products({ item }) {
   return (
     <>
       <img src={item.image} alt={item.title} className={styles.img} />
@@ -16,6 +16,4 @@ export default function Products({ item, cart, setCart }) {
 
 Products.propTypes = {
   item: PropTypes.object,
-  cart: PropTypes.object,
-  setCart: PropTypes.func,
 };