Meetup detail page redesign proposal

[n-d-r-d-g]

@MrSunshyne As you mentioned in #223, we need to rework the meetup detail page. I have created a v1 redesign in Figma. We won't have to start from scratch in the community call.

In the meantime, anyone can send their proposals in the comments.

Figma design

[n-d-r-d-g]

Please note that the sticky dock to RSVP hasn't been added in the Figma design yet.

[n-d-r-d-g]

Changelog:

• Removed TOPIC - not sure what it means (can be added back if needed)
• Sticky observer (JS) adds extra whitespace between the header & content - whitespace size needs to be reduced
• Moved date, time, location to the top for quick access - more important than the agenda (IMHO)
• The location text is a link to the Google maps location - can also be a simple text in certain cases
• “Seats limit” has been replaced by “Seats left” to give potential attendees a sense of urgency to RSVP - different colors based on % seats left
• Parking slots has been added to indicate the number of available parking slots - different colors based on parking availability
• If parking is available, when clicking on the parking slots (both number and text), a google maps link is opened
• “Agenda” has been changed to “Talks“ as the order is not always followed at meetups - can be changed to something else as well
• Removed click on talk as it redirects to the speaker’s detail page - enable click only on the speaker’s avatar, name & icon next to the name
• Moved speaker avatar and name to the bottom of the talk’s title to prevent alignment issues whenever the title is too long
• “Sponsor(s)” has been changed to “Sponsor” if there’s only 1 and “Sponsors” if there’s more than 1 - looks neater
• Redesigned sponsor cards - removed duplicate “sponsor” text from tags

[MrSunshyne]

@n-d-r-d-g We don't need to keep the sticky dock. Completely open to new ideas.

[n-d-r-d-g]

Based on yesterday's community call, the following changes need to be made:

• Increase the font size and spacing between the date, time & venue
• No need to have the number of parking slots in different colors
• Display only whether parking slots are available or not
• The parking information is not that important to be emphasized on
• Add the attendees information in the card (with a progress bar)
• Add a square with rounded corners as icon background (date, time, venue)
• Add the RSVP button (find a way to display the information on the sticky dock)
• Create the tablet and/or desktop designs