Dine challenge with React

Hi everyone, had a challenging time with this one from start to finish. It's my first multi-page and react project and I thought the design was a fun way to practice mapping. It quickly became one issue after another (Where to put CSS? Module or 7-1? How to access the images? Will they be in public or src? How to NOT access the DOM?) On hindsight, I should've studied a bit more before this attempt. Still very much a beginner.

The CSS was equally hard - there are layout shifts in every section of every given screen design. The form jumps with validation and I'm not able to implement the dropdown design for the select choices, but I think I'm ok with these. Needless to say, I learned A LOT. Big thanks to @grace-snow for accessibility tips :-)

For my questions:

1. Is there anyway to reuse a Button component in such a way that you can control its parent tag (a or button) or pass it as props? I'm reusing the button classes for the form button which is not very DRY

2. How do I reset the form on successful submit? e.target.reset() isn't working.

3. I tried to create a custom hook for responsive bg headers. Can't figure out why the images are not showing. Here's the relevant file if anyone would like to take a look.

4. The events section on the homepage has this light gray bg-image that would only render as a square block if I used the appropriate image (curve-top-right.svg). Luckily, the other assets look similar so I just rotated it (curve-top-left.svg) to get the same effect. Can't figure this out.

Any other feedback is welcome. Thanks in advance!