Deployment issue (newbie to netlify and React)

I’m new to Netlify and React, I’m struggling to get my page deployed, it’s something I’ve done but not sure how to fix it as I’ve tried deploying on Vercel and getting the same issues

here’s my log:

here’s my github repo (contains file structure):

for reference here’s my App.jsx (as from my understanding it’s an issue with accessing the other files via routing?):

I’ve tried uploading the dist file directly and it was deploying with bizarre CSS. I’m trying to upload via Git Hub. when I use npm run dev it displays perfectly.

Any help is greatly appreciated, i’ve checked pathing, spelling, and capitalization and believe to have it correct. thanks again in advance, and please bear in mind I’m new to web dev.

Because all the files in components have lowercase names. Netlify uses Linux which is case-sensitive. Read more:

for some reason in my IDE they were correct casing but not on GitHub, thanks for the second set of eyes