Draft 0.1: Tournament Page

[MTG2000]

This PR contains the basic Overview page, & the events page. Of course the data is mock data.

(The makers page is still a WIP)

[netlify[bot]]

✅ Deploy Preview for makers-bolt-fun-preview ready!

Name	Link
🔨 Latest commit	ef440e159d45c59c81ed59d1bbe02fce7b673c8e
🔍 Latest deploy log	https://app.netlify.com/sites/makers-bolt-fun-preview/deploys/631f24742f5ecb000bb6506c
😎 Deploy Preview	https://deploy-preview-148--makers-bolt-fun-preview.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify[bot]]

✅ Deploy Preview for makers-bolt-fun-stories ready!

Name	Link
🔨 Latest commit	ef440e159d45c59c81ed59d1bbe02fce7b673c8e
🔍 Latest deploy log	https://app.netlify.com/sites/makers-bolt-fun-stories/deploys/631f247469f4df00096faaad
😎 Deploy Preview	https://deploy-preview-148--makers-bolt-fun-stories.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[barefoot-88]

Tournaments QA

General

Background colour

• The background colour of the screen should be Cool Gray 50 (#F8FAFC). If we have time, I think we should also implement this background colour on every page in the web app apart from the Projects page.

Navigation

• Nagivation modal should have a divider both above and below to give visual distinction between the top nav. As you can see below it doesn't have a top divider so the area begins to merge with the white above.

---

Overview page

Register card This card should have a border width of 1px, not 2. It gives an extra element of depth to the card within a card...

Registration button Once a maker has successfullu registered, we should show the disabled state of the Tertiary (light grey) button, like below:

Sponsors Since we only have one sponsor for this tournament currently, we could just dispplay their logo as opposed to a small avatar. Considering they're paying $$$ for the prizes it would be nice to have something slightly more prominent. See below:

Judges

• Add correct animojis for the judges
• Add the following judges:
  • Nicolas Burtey
  • Bumi

FAQs Could we please reduce the heading size of the questions? They seem a bit too big for both web and mobile! Perhaps the same weight but with font-size 18...

Events page

• Insert the correct images for the different events
• Insert the correct times for the events (I think I got this wrong in the .js file)
• Make sure we can include the full event description in the modals...
• Add a "List an event" button which leads to: https://airtable.com/shrjVx8MjLfl8zyXD

MTG can you see the info in this Airtable form? This is where we store the data (event names, descriptions, etc) https://airtable.com/appmFLKztNo03p253/tblYjG3rIY0J0GDjL/viwv4i3oVQxwVzOAL?blocks=hide

Makers page

Personal hacker card

• Reduce the text size of the Hacking Status chips so they match the other skills, roles, etc. This should be Body 2 (14px)

Registration

New maker After loggin in with my new profile and confirming my details, I was shown this display.

• Kern/clip the maker's username so that it fits in the modal's content width
• The padding of this modal should be the same as the other 2, which should be 24px on web, 16px on mobile
• If the maker has filled out their name, roles, skills, and a social media link, should we prompt them to "Complete maker profile" as the main CTA? Instead these two buttons could be switched around in terms of the CTA priority.

Other

Hackathons page design

• We will eventually need to fully redesign this page, however for the time being if we can redesign it to the following it should work for the forseable future.
• The tournament we're currently hosting can be displayed as a big banner across the top. Below is a list of all hackathons and events.

[barefoot-88]

Final QA

Hackathons page

• Use a 4 column grid, ATM looks like we're using 3... Any chance we could also add the events from the tournament into this to populate it a bit more?
• Reduce the top padding between the featured tournament banner and top nav bar to 32px (same as margins on side of page)
• The Legends of Lightning tournaments banner across the top should be the same height as the one on the Projects/Home page (232px), we can just reuse the component.

Tournament page

Overview

• Increase the contrast of the disabled "Registered button" ever so slightly. ATM this might not pass web accessibility guidelines.
• Reduce the Register-Card border to 1px rather than 2px. (this is the card which contains the avatars + amount of makers taking part, registration button, countdown, etc).

Products page

ATM we're showing two banners, however the "Submit app" currently doesn't work, so perhaps for now we can remove the "Submit app" banner and just have the single tournament banner - this will also make it a bit more prominent.