Create this website:

The following is more context about the game, extracted from another repository.

My idea for this site is that it should be a relatively simple site at first, from a visual point of view, but in the end it will end up having several functionalities, so it needs to grow in a scalable way, more in the sense of the codebase, with code lines in each file and domain separation.

The idea is that this site will have a landing page, with some orange tones — I think that fits this project better — maybe even something orange and black, something closer to dark mode, without a white mode.

It will have the landing page and, we don’t yet know how we will organize it, but the idea is that there will be a page for all the classes and show all of them. We don’t need to have individual pages for each class for now.

On this page that shows all the classes, it needs to display, for example, squares, two per line, quite large, showing almost all the information of each class in an easy-to-read way, just like it’s already in the documentation. Some details may be in bullet lists, and eventually we will also have to show how to resolve each situation between classes, such as the fact that if someone shoots a mage during a cadabra, it cancels the Mage’s action.

So, we need to have, for example, a “see more” button that simply expands the card with more specific information about that class.

We also want to have a page describing the existing game modes and also the game mechanics.

We may also have a page for actions, and on this page we’ll show, in smaller cards this time, all the possible actions in the game, with a search bar so we can quickly search for a specific action.

There, we’ll have defend, shoot, reload, abro cadabra, and so on, all the actions, including the finisher, with an image and a brief description of what it does, as well as showing some specific interactions.

What happens in these small action cards is another important part of the website.

There will also be one feature that requires authentication and consequently a database to store users, more specifically to store a ranking.

The idea is that this will be an ambassador system for the game, where we will be able to register official matches, and the official matches will include members who are users of the site who registered and are eligible to participate in these official matches. They will be inserted manually by an Admin — in this case, the ambassador. The ambassador can register official matches, marking the players, the classes they used, and whether it was a victory or a tie, who won, or which sides tied. The idea is to have a page with a list of all official matches, from most recent to oldest.

The ambassador will also be able to note the date, even if the match wasn’t on that day, and maybe the location.

The idea is for this to be a page with just a list of lines, maybe even clickable expandable lines, something around 800 pixels wide and about 40 pixels tall initially. Then, when clicked, it expands to show better information and possibly other details of that match. From top to bottom it will be ordered by most recent and also searchable, with a search bar to search through any client-side available information in that match, almost like a text search.

This connects directly to the ranking, which will use the Elo method. Each player will have an Elo value, and the one with the highest Elo will be at the top of the ranking. This Elo will be defined by the official matches in a way that makes sense.

Another thing: when users register, they need to have a profile page. On this profile page, they’ll need to add:

• An avatar

• A name

• A display name

• Optionally, other information, such as:

  • Favorite class
  • Favorite game mode
  • Other user interests

This information will be used to create a page that shows the sum of everyone’s opinions regarding these things.

Project in nextjs, tailwind, shadcn components (don't create them, import them using shadcn commands), @neondatabase/serverless Neon DB, @stackframe/stack Stack Auth