Sponsors page

[mushroomgenie]

Description

This PR implements the sponsors page based on the design that was given in the issue. A new page is created with a separate endpoint and the page is broken down into components based on the design. Since the design was just a templated, the data too was imported as is from the Figma file.

Closes #106

What change does this PR introduce?

Please select the relevant option(s).

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• CI/CD (updates related to the CI/CD process)
• Documentation update (changes to docs/code comments)
• Chore (miscellaneous tasks that do not fall into the above options)

What is the proposed approach?

Created a new page in the pages folder. Added the route /sponsors. Created new components that are being used in the newly generated page file.

Checklist:

• The commit message follows our adopted guidelines
• Testing has been done for the change(s) added (for bug fixes/features)
• Relevant comments/docs have been added/updated (for bug fixes/features)

[mushroomgenie]

@tjtanjin could you review this PR ?

[tjtanjin]

Hey @mushroomgenie, thanks for putting this together!

The overall structure and dark-theme design look good, and splitting the page into focused components makes sense. Some issues to address before merging:

• The “Talk to us to get started” buttons, “Visit website” links, and FAQ Discord link currently have no destination or click handler. It'd be nice to point those buttons at discord/website.
• For monthly sponsors, the figma design had placeholders but we should have more concrete perks. For now, let's go with this:
  • Bronze ("Addition to our sponsors' list", "Discord badge")
  • Silver ("Everything in Bronze", "Priority Support")
  • Gold ("Everything in Silver", "Private Support")
  • Platinum ("Everything in Gold", "Priority Feature Request")
• Make the new page discoverable by updating the existing “Sponsors” navigation/footer link to point to /sponsors.

Thanks again for contributing! Once these are addressed, the page should be in much better shape to ship!

[mushroomgenie]

@tjtanjin I made the changes, can you review the PR and see if it can be merged ?

[Deksu]

Hey @mushroomgenie and @tjtanjin! Sorry for late reply, this PR was already merged and is live but had a few UI related notes and fix suggestions.

1. Add margin between sections: original design had 200px (and 128px on mobile) between all three main sections
2. Fix the sizing and alignment issues on the sponsor tier cards: when resizing window, the size and the alignment of the cards arent optimal: they should stay the same size and align nicely. This also means that on desktop, the cards should be of the same height. I also think the cards should be wrapped so that they align into rows more evenly when the screen width gets smaller.
3. The tablist element above the cards isn't responsive: every tablist item should be visible no matter the screen size: the text should wrap into multiple lines if needed.
4. Clicking the tablist to toggle between sponsor types causes the whole page to reload: the content should dynamically change.

Most of the FAQ items are also missing the content and also opening and closing these FAQ accordions is causing some "jumpiness" in the UI. My guess would be that its animating height: auto or there is a Framer Motion related issue like nested layout animations or something causing this. Should be a fairly easy fix

Also a more general note: looks like the text isn't resizing on smaller screens, for example the h1 stays at 60px along the way but on mobile it's set to 48px in the original Figma designs. I think this is a general typography issue and would need a separate task, issue is not related to this specific PR or page.