#2 - main page

[brzozka]

This PR should close #2 and close #14

As of now, most of the data is static just to show design and functionality of the components.Of course I am open to any suggestions regarding color scheme. There are some missing features, caused by the fact that most of the data needed in them is provided from backed, for example:

1. Clickable provider and country icons.
   
2. Similarly on mobile.
   

I will create issues regarding these changes.
Here are some screenshots of how it looks now on mobile and desktop.

Desktop main view:

Try it out/Logged user view:

Mobile main view:

Mobile Try it out/Logged user view:

Mobile Try it out/Logged user view after pressing map button:

Mobile Hamburger menu:

[EwelinaSkrzypacz]

I will nit-pick a bit.

1. When I run this project, I see some warning in console

2. For me on full HD, we shouldn't scroll to click buttons - they should be visible at the first glance.

3. We have two buttons in the same color - I think the button "TRY IT OUT" should be our CTA button, so it should have some color. But this "REGISTER" button could be outlined maybe? Also please add some padding to buttons. Buttons from TailwindUI are style quite good. Also for CTA button we need a little more stronger color, maybe sky-500? We can make components for CTA button like "PrimaryButton.vue" and for outline button "SecondaryButton" or something like this.

4. Please change UPPERCASE text on buttons to lowercase. We don't have to scream at the user.

5. This array next to "LOG IN" is small arrow

I'm not sure, if we need here an icon. But if we really want, we should use heroicons package https://heroicons.com/

First of all it's to much space between label and select. Also the label text doesn't have to really big. Next, we can rid of this "Select" text, because when the user sees select, he knows, that he should choose something, so we can stay with "Country" and "Provider".

7. I think that here we need a little bit space

Also I think that I will swap country name and city name, because the flag is sufficient for most users, and they will care in which city are providers.

8. I'm not a big fan of this scroll

Can we hide it?

9. As I understand, when the user chooses nothing from selects, he will see random six things. But when he chooses for example Poland as a country, will be here infinitive scroll or some pagination?

10. Can we add some minimalist footer? We could write there last version of page or something.

[brzozka]

1. Fixed.
2. I didn't encounter this error, even when I tried on different web browser, so I don't really know how to fix it.
3. Fixed, the buttons are components now
4. Fixed to lowercase.
5. Deleted the arrow.
6. Adjusted size and spacing.
7. Names were swapped, and the select was removed.
8. Scroll is now hidden in this element.
9. As of now the scroll would be an infinitive scroll, I think user in country search should be able to type either country as a whole or a specific city.
10. Added, I took it from one of blumilk's projects.

[EwelinaSkrzypacz]

1. I see warnings, when I run npm run dev

2. On Chrome I see scroll on the main page

Maybe the image should be smaller? And it's a bit nit-picking, but I'm not a big fan of this buttons - for mobile they look different and for me better than in desktop.

[EwelinaSkrzypacz]

Still I don't see buttons on main page:

[brzozka]

Still I don't see buttons on main page:

I don't know how to fix this problem, because I couldn't recreate it on both my laptop and pc. When I try the resolutions on inspect mode the whole page height is matching the given height fe. 1080.

[vojcc]

[EwelinaSkrzypacz]

Please fix these problems