All solutions

So, i found a few details quite treaky, like:

• the thin lines connecting those 3 cards ('Brand Recognition...') - i finally used pseudo element. Is there a better way of doing this?

• background color of the div with form - changing from white to gray. I was trying with box-shadows, outlines, pseudo elements, and finally i found the solution with linear gradient, but also i think there is more elegant way.

I wanted to use this project to practice TDD with vitest library, but there was not too many elements i could test - it's mostly static html

I'm not sure how to position images at the start of the main section - there was a lot of problems with overflowing, cutting the bottom-half though absolut positioning with bottom of 0, or playing with object-fit. It took a lot of time. Is there some good practice for this kind of layout?

I spent some time on placing the main images covering the whole page - it was either causing overflow or didn't cover the whole page. Also during deployment on gh-pages, some adjustments must had been done for the react router to work properly, especially images

I've changed the design a bit to add a functionality, e.g. sorting the countries. Code only uses the main api end-point - i've figured it's better to make the api call once and play with the whole data inside locally in the program, than making new requests - it was slightly lagging.