Lightning Landscape QA

Explore page

Header section

• 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…

Filter bar

• 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
• 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.

how it should look…

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

• 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…

Eventually, we can implement a "Sort by" filter than allows users to switch between

• Alphabetical (A-Z)
• Activity (High - Low)
• Activity (Low - High)