# Lightning Landscape QA ## Explore page ### Header section ![](https://i.imgur.com/4pvVDpx.png) - When no filter added, header should read "Discover {total} lightning projects" - with a subtext reading "Explore a directory of lightning startups, projects, and companies." - When a filter is added, header should read "Explore 14 lightning projects" - with a subtext reading "Filtered by" - How to Display filters - Founded in "🗓 Founded in 2017" - Tags "🏷 Node Operation" - Licence type "💻 MIT License" - We don't need to display the category as the tab should be pre-selected - Use the updated cover image how it should look... ![](https://i.imgur.com/sP15kFN.png) ![](https://i.imgur.com/h25waiJ.png) ### Filter bar ![](https://i.imgur.com/98DwnhZ.png) - Font size should be 14px. ATM it's too big and overclutters this element - Remove padding from the edges of the tabs - Spacing between these tabs should be increased by a unit of 8 or 16px - "Search Results" should actually be "All projects" - Remove the padding from the side of this specific tab - A good implementation of this design can be [found here](https://www.airbnb.co.uk/?tab_id=home_tab&refinement_paths%5B%5D=%2Fhomes&search_mode=flex_destinations_search&flexible_trip_lengths%5B%5D=one_week&location_search=MIN_MAP_BOUNDS&price_filter_input_type=0&price_filter_num_nights=5&search_type=category_change&category_tag=Tag%3A5348) - If the user selects a category within the Filter page, when re-entering the epxlore page this should be updated and switch to the correct one - Remove the fill from an activated tab. Otherwise we have to keep unnecessary paddings. If not possible, keep 8px padding. ![](https://i.imgur.com/XNAMzOm.png) how it should look... ![](https://i.imgur.com/SZOUFAd.png) ### Project card The client wishes to make it easier to visually differentiate between projects that are alive and inactive. This will eventually become a more complex colour coding system that relies on things like Github activity. However, for now projects should be shown in the following order and priority... - Projects should always be ordered alphetically, then... - Projects that are alive/active (shown with green dot) should be displayed first - Projects that are dead/inactive (shown with red dot) should be displayed last ![](https://i.imgur.com/v8fDGHe.png) ![](https://i.imgur.com/StAGWcF.png) - If it is not possible to show Active, Inactive both alphabetically, we can probably show all projects alphabetically and rely on the green/red dot to show project activity status. This might be less confusing... ![](https://i.imgur.com/sgw7rYp.png) Eventually, we can implement a "Sort by" filter than allows users to switch between - Alphabetical (A-Z) - Activity (High - Low) - Activity (Low - High)