Add UI to the search page based on three buttons: All, Players, and Events. Based on the button clicked, render components accordingly to the figma design.
Create a listview page. One for "All" and one for "Player". Later you will add a page for Event. Therefore, the url endpoints should look like:
/listview/all?keyword=value&type=value (this will take several query params and values depending on the type of tab the user interacted from the search page)
/listview/player?username=value&keyword=value&type=value (this query has the same params as the one above but the only difference is that it has a username param on it)
The "all" listview will show a number of rows based on the results it found on the backend which uses the keyword that the user typed to search. For this, use a grid system to display the results with the help of bootstrap.
Player listview will take/use three button tabs: Player Record, Profile Details, and Emblem Info. Based on the button clicked, render components accordingly to the figma design. Use a grid system to display the results.