styling: more stuff

This commit is contained in:
Mike 2024-11-19 18:06:37 -05:00
parent 9c6bed1983
commit 0664755110
7 changed files with 69 additions and 11 deletions

View file

@ -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>

After

Width:  |  Height:  |  Size: 511 B

View file

@ -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>

View file

@ -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,
};

View file

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

View file

@ -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>
);
}

View file

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

View file

@ -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 {