HTML & CSS Solution

Hello!

I decided to use basic HTML & CSS (flexbox) for this project.

I went back-and-forth with how I wanted to offset the phone image within the header / hero section. Ultimately, I decided to position it absolute and translate it to the correct position. This feels a bit forced, but seemed like a better approach than keeping it position: relative and offsetting it. Also, I couldn't get the rounded borders of the first two sections to get the right angle. I used a pseudo-element with border-radius, but it looks like it needs a value of more than 50% to look correct.

Any feedback is appreciated!