Four Card Layout

hi, first of all, for the netlify issue: in your "site configuration" settings there is a setting for "build command" (which should be npm run build in your case) and "Publish directory" which would be dist. You also don't need node_modules and dist folder in your repo, since all the information to generate those is in package.json and config files (add the files to your .gitignore) overall the code looks good, readable and structured well. Some comments to improve.

• general: If you have access to the design file, try to pay attention to the details (font-sizes, colors, shadows, padding, margin) try to get them exactly the same as the design.
• react:
  • the setComponent function in App is not really something that is used for a simple case like this. I would pass a single prop card to the BasicCard in the App component (so {setComponent(0)} would become <BasicCard card={cardData[num]} />) then in the component you can do props.card.id, props.card.color`, ...
  • you can move const cardData = [...] out of the component (now it would recreated every time the app rerenders)
  • (BasicCard.jsx) avoid exporting a component as a default (I could do import Yadayad from "./components/BasicCard"), instead you can do export function BasicCard(props) {} or export { BasicCard } when you use this (called named export) you make sure the same component name is used throughout your project (useful when working with multiple people on a projects)
• sass: generally I prefer to leave an empty line before each new declaration, this gives the code some breathing room. I also prefer scss over sass since it looks a bit more like regular css (that's also why they created it) but that's just personal preference, they're basically the same except the syntax. That being said: scss is used a lot more in the "real world"
  • .card is declared in App.sass and Card.sass keep it one file to avoid confusion (best practice is to have all the components specific styling (like bg color, border, shadow, text styles) next to the component (in Card.sass) positioning (like margins) can be in app.sass)
  • &: read up on the use of & in sass, it basically will place the parent declarition instead of the & eg .header { &__header {} } will result in .header__header: {} and can clean up the structure of your styles even more
  • units: you have a declaration img { max-width: 5em }, I wouldn't use em in this case, it can have unexpected results. also try to avoid mixing rem and px, try to use the same unit everywhere (rem is usally preferred)

hope you get anything useful out if this, try not to let it overwhelm you and tackle it step by step (you can create a new commit for each change, it's good practice!)