styling: more stuff

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