add contests to the explore page

[dillchen]

Description

Contests should be displayed on the new explore page being developed as part of #9383

Project Owner

@sachben91

User Stories / Acceptance Criteria

• The explore page should have a section that displays contest cards

• The contests on common and contests on Farcaster are differentiated by the logo that is shown on the card - Farcaster contests would have the Farcaster logo and Contests on Common would have the contest logo
• Clicking on see all would show the list of the all the contests that are currently active
• Contests that have ended are not shown on the explore page and should be removed as soon as the contest has ended
• Clicking on "Go to contest" on a Common contest would take the user to the topic on which the contest is active
• Clicking on "Go to contest" on a Farcaster contest would take the user to the contests page for Farcaster (we will have a separate ticket to have unique links for contest to change this)

Design Devlink

Figma

Additional Context

This work should be done as part of the new explore page

[masvelio]

@dillchen @sachben91 what is a priority here? Should I focus first on farcaster or start looking on this?

[sachben91]

@masvelio first farcaster then explore page for sure

[masvelio]

@dillchen @sachben91 @sssssabinaaa

I have got couple of product/design questions regarding this ticket (and a whole new explore page actually as well):

1. Design shows ideal state regarding width of the screen. It perfectly fits 3 cards of contests and 4 cards of quests/tokens etc. What happens on smaller/bigger screens. Do cards have fixed width, so there will be empty spaces at the end of the row? Or should we make cards fluid. I would opt for latter, however, it would be good to see some mobile screen designs as well.
2. Image is not obligatory when launching a contest. How the card looks like without the image? So far on contest cards in other places we didn't display anything, but in this case, when cards in the row have to have the same height, we should probably add some placeholder for the contest image.
3. What's the function of the address tag next to contest title? Is it contest address? Is it clickable/has copy to clipboard function?
4. There is so little space for contest title in the card. In case if the title is long, do we want to move it to the next line or use ellipsis?
5. Regarding this

Clicking on see all would show the list of the all the contests that are currently active.

We only have page that lists all contests but within the community. We don't have page listing all contests in Common. So might be a separate ticket.
6. Wondering if shouldn't we start with new explore page first and then work on particular sections

[dillchen]

1. Design shows ideal state regarding width of the screen. It perfectly fits 3 cards of contests and 4 cards of quests/tokens etc. What happens on smaller/bigger screens. Do cards have fixed width, so there will be empty spaces at the end of the row? Or should we make cards fluid. I would opt for latter, however, it would be good to see some mobile screen designs as well.

We should max to the same amount of cards as we do for tokens / quests / communities. (I.e all cards the same width). We should apply the same rules for responsiveness etc as we do for community cards.

Mobile screen (we should only show 1 card, similar to community cards)

2. Image is not obligatory when launching a contest. How the card looks like without the image? So far on contest cards in other places we didn't display anything, but in this case, when cards in the row have to have the same height, we should probably add some placeholder for the contest image.

I believe we have a placeholder image in place in the Contest Figma, let's use that as a default image.

3. What's the function of the address tag next to contest title? Is it contest address? Is it clickable/has copy to clipboard function? There is so little space for contest title in the card. In case if the title is long, do we want to move it to the next line or use ellipsis?

In cases where title is too long, let's use ellipsis. Yes, contest address and copy to clipboard. However let's omit the contest address for now

4. Regarding this
   Clicking on see all would show the list of the all the contests that are currently active.
   We only have page that lists all contests but within the community. We don't have page listing all contests in Common. So might be a separate ticket.

Let's omit the see all button for now. Either way, seeing all contests should show all contest cards, it should still show the same filters, launch, and other buttons from the explore page --> cc: @sssssabinaaa for behavior

6. Wondering if shouldn't we start with new explore page first and then work on particular sections

Would rather just add contests to current explore page now. We are lacking product functionality due to this. Aiming to get out in next release.

[masvelio]

1. Design shows ideal state regarding width of the screen. It perfectly fits 3 cards of contests and 4 cards of quests/tokens etc. What happens on smaller/bigger screens. Do cards have fixed width, so there will be empty spaces at the end of the row? Or should we make cards fluid. I would opt for latter, however, it would be good to see some mobile screen designs as well.

We should max to the same amount of cards as we do for tokens / quests / communities. (I.e all cards the same width). We should apply the same rules for responsiveness etc as we do for community cards.

Mobile screen (we should only show 1 card, similar to community cards)

There are only 2 cards per row for communities. Do you mean to have also 2 cards in a row for tokens / quests / communities?

2. Image is not obligatory when launching a contest. How the card looks like without the image? So far on contest cards in other places we didn't display anything, but in this case, when cards in the row have to have the same height, we should probably add some placeholder for the contest image.

I believe we have a placeholder image in place in the Contest Figma, let's use that as a default image.

I can't figure out where exactly it is so @sssssabinaaa please point me to it 🙏

4. Regarding this
   Clicking on see all would show the list of the all the contests that are currently active.
   We only have page that lists all contests but within the community. We don't have page listing all contests in Common. So might be a separate ticket.

Let's omit the see all button for now. Either way, seeing all contests should show all contest cards, it should still show the same filters, launch, and other buttons from the explore page --> cc: @sssssabinaaa for behavior

I am fine with this for now, but in the long term I would definitely avoid putting all of this stuff in one page (tokens, quests, contests, communities) for couple of reasons:

1. Scrolling will be difficult for user
2. Using filters will be weird => filtering just items from one section (like communities)
3. Implementing pagination that combines multiple lists will be a hell

I think that eventually we should show on explore page just a sneak picks / top results (with see all button) and have separate pages for tokens / communities / quests / contests with proper filters and pagination

[dillchen]

There are only 2 cards per row for communities. Do you mean to have also 2 cards in a row for tokens / quests / communities?

Yes

I can't figure out where exactly it is so @sssssabinaaa please point me to it 🙏

Here is the link: https://www.figma.com/design/NNqlhNPHvn0O96TCBIi6WU/Contests?node-id=2472-2448&t=ZKLOEzcJGXa8QqBk-1