Site-Wide Search

[forecast]

User story

As a potential site user (LT, UA, EN) I should be able to search the information site-wide, so that my browsing experience would be better and I would find the information I need very quickly.

Acceptance criteria

1. I should be able to reach search in every page in the header on all screen sizes;
2. On wide screen I should see a search input field in the hero section;
3. Header search CTA and hero search input should trigger a search field and a dropdown, add a darker background behind, so that user would be focused on his search;
4. In focused search field with no input, provide most popular suggestions in the dropdown;
5. If the user types something, suggest similar keywords, provide the results in the order which is provided in design. Add a category label and group results. Display the number of results in every category beside the category title;
6. Input + dropdown should not be longer in height than the screen height;
7. Add "Rodyti visus [all results #]" CTA at the bottom, which should link users to the results page;
8. The last result in the dropdown should be faded (if there are more results) - indicate that there are more results found;
9. Each result teaser in the dropdown should have a regular, hover and active state which is provided in design. Teaser should have a heading and a short copy which should be liminted - max 2 lines. Keyword should be highlighted. Event teaser should also have a date, city and time;
10. Do not display past events;
11. User should be able to remove the keyword from the input field by clicking "x" icon;
12. User should be able to easily exit search by clicking close icon;
13. SEARCH RESULTS PAGE. User should see a cover at the top of the page;
14. SEARCH RESULTS PAGE. User should see breadcrumbs;
15. SEARCH RESULTS PAGE. User should see his keyword;
16. SEARCH RESULTS PAGE. User should see total number of results found;
17. SEARCH RESULTS PAGE. User should see categories in tabs and should be able navigate (use existing component from https://suukraina.lt/patikimi-saltiniai#43d4081c-a902-577e-b572-4d8b528ef83d). Tabs should stick when scrolling, scroll to selected category (same working principle);
18. SEARCH RESULTS PAGE. Also group results by category. Display categories, add # of results in the category;
19. SEARCH RESULTS PAGE. Teasers should also have regular, hover and active states, event teaser should be different as provided in design;
20. SEARCH RESULTS PAGE. When user clics "Aukojimas" category teaser, link user to organisation sigle page;
21. SEARCH RESULTS PAGE. When user clics "Savanorystė" category teaser, link user to https://suukraina.lt/pagalba-ukrainai/savanoryste and scroll to the card, add a blue stroke on it in order to highligh;
22. SEARCH RESULTS PAGE. When user clics "Informacija" category teaser, link user to https://suukraina.lt/ua/vazhlyva-informatsiia/mihratsiini-posluhy/. Relevant result should be expanded, scroll user to the result;
23. SEARCH RESULTS PAGE. When user clics "Paslaugos" category teaser, link user to https://suukraina.lt/ua/poshuk-posluh/ and scroll to the card, add a blue stroke on it in order to highligh;
24. SEARCH RESULTS PAGE. When user clics "Renginiai" category teaser, link user to original event page, open it in a new tab.

Design link https://www.figma.com/file/SbHEfVWgFSozSl1m5oJdmd/Suukraina.lt?node-id=2038%3A36324&t=DNVyW4VdYivmVf3Y-1