Redesign listing anchors component about 30-seconds-web HOT 3 CLOSED

Current situation

In the image below, you can see the current implementation (Home - Main Listing - Top-Level Listing):

Problems

• Design looks and feels clunky on mobile, large buttons, colors that do not fit well together right next to each other.
• Hard to realize these elements are clickable or that there's more than one action to take.
• Users may skip over them on home screen.
• Design on desktop is clunky, looks rather ugly and has issues when navigating on a laptop without a mouse.
• Snippet count being shown in some places but not in others is inconsistent.

Opportunities

• Get rid of horizontal scrolling.
• Provide a cleaner design, make each button distinguishable.
• Use vertical screen real estate to show all options at once.
• Be consistent about the information provided (i.e. snippet count)

from 30-seconds-web.

The design pictured above handles the following:

• Allow home page and main listing to become one page with very prominent filtering options.
• Allow all categories to be shown in the home page in the desired order.
• Allow language top-level listings and tag listings to feel like they are on the same level of the tree.
• Provide information about the current user location.
• Move search to its own dedicated page, use the (hopefully revamped by then) navigation menu to make search as prominent as necessary.

from 30-seconds-web.

• To keep this in-scope, the Home/Main Listing unification will be part of #57.
• Showing all categories in the Home page will be part of this issue's PR.
• Search updates might be partially implemented, but most likely finalized in #57.

from 30-seconds-web.