All solutions

Took this opportunity to have a bit of practice with React (boy, it's been a while)!

My main issue was implementing a transition effect on the submit button's background color on hover.

Initially, I applied it via transition: backrgound-color 0.2s on the .btn default state but this turned out janky (it looked like the button flashed on mouse-enter and the transition only triggered on mouse-leave).

A bit of searching tells me that I can use the CSSTransition component for this.

Is this the best way to add transition effects into React or is there a native way to do it?

I used a mobile-first design approach for this challenge.

Adding a border to the "learn more" button hover state without pushing other elements was quite interesting.

I rely a lot on display: flex to lay out my content - I am looking to use grids for future challenges (if anyone has a good instructional resource that they can share, that would be awesome!).

Figuring out how to display the result screen was quite tricky! I ended up creating a "dormant" element that switched to "active" when users click on the submit button (inspired by Jonas Schmedtmann's HTML and CSS course).

I spent a lot of time thinking about what font-size/gaps/margins/paddings to use and ended up with random values purely based on how it looked - this felt very hacky and disorganized. Is there a better way to approach this?