Build Tournament page roadmap and waitlist UX

[AYOMI-cmd]

Closes #316

Pull Request: Implement Tournament Landing Page with Roadmap & Waitlist

Closes

Description

This pull request replaces the generic Coming Soon placeholder at /tournament with a branded Tournament landing page that introduces the upcoming tournament experience and provides users with a clear roadmap of future releases.

The page includes roadmap cards highlighting upcoming tournament features, an optional email/wallet waitlist form (using local state until backend support is available), and a prominent call-to-action that directs users back to the dashboard.

The implementation provides a polished user experience while remaining compatible with future backend integration.

---

Problem Statement

The /tournament route currently renders a generic Coming Soon page, providing little information about upcoming functionality or user engagement opportunities.

This results in:

• An unfinished user experience.
• No indication of planned tournament features.
• No mechanism for users to express interest.
• Poor navigation flow back into the application.

---

Changes Implemented

Tournament Landing Page

• Replaced the placeholder page with a branded Tournament landing page.
• Added consistent branding aligned with the application's design system.
• Designed the page to accommodate future tournament functionality.

Roadmap Cards

Added informational roadmap cards showcasing planned tournament features, including:

• Seasons

  • Seasonal competitions
  • Ranked progression
  • Leaderboards

• Prizes

  • Tournament rewards
  • Achievement badges
  • Future reward tiers

• Eligibility

  • Participation requirements
  • Qualification criteria
  • Upcoming registration details

Waitlist UI

Implemented an optional waitlist section supporting:

• Email registration.
• Wallet address registration.
• Client-side validation.
• Local state management for submissions.
• Success and error feedback.

The component is designed to integrate seamlessly with a backend API once available.

Navigation

• Added a prominent Back to Dashboard call-to-action.
• Improved navigation for users who arrive at the tournament page before the feature is fully released.

Responsive Design

• Optimized layouts for:

  • Desktop
  • Tablet
  • Mobile

• Ensured roadmap cards and waitlist components adapt across screen sizes.

Accessibility

Implemented accessibility best practices, including:

• Keyboard navigation.
• Proper form labels.
• Accessible buttons.
• Visible focus states.
• Screen reader support.
• WCAG-compliant semantic structure.

---

Technical Details

Updated Route

• /tournament

Components Added

• Tournament page layout.
• Roadmap card components.
• Waitlist form component.
• Dashboard navigation CTA.

State Management

• Local React state for waitlist submissions.
• Designed to be easily replaced with API integration in future releases.

---

Testing

Functional Tests

• Tournament page renders successfully.
• Roadmap cards display correctly.
• Waitlist form accepts valid input.
• Form validation behaves as expected.
• Dashboard CTA navigates correctly.

UI Tests

• Responsive layouts.
• Mobile rendering.
• Dark mode compatibility (if supported).
• Visual regression snapshots.

Accessibility Tests

• Keyboard navigation.
• Focus management.
• Screen reader compatibility.
• Form accessibility.
• ARIA validation.

---

Validation Performed

• ✅ npm run lint
• ✅ npm test
• ✅ npx tsc --noEmit
• ✅ Component tests passing.
• ✅ Visual regression tests passing.
• ✅ Accessibility validation completed.
• ✅ No regressions detected.

---

Acceptance Criteria

• ✅ /tournament displays a branded Tournament landing page instead of a generic placeholder.
• ✅ Roadmap cards highlight Seasons, Prizes, and Eligibility.
• ✅ Optional email/wallet waitlist UI implemented using local state.
• ✅ Clear call-to-action provided to return users to /dashboard.
• ✅ Responsive and accessible implementation.
• ✅ Ready for future backend integration.

---

Out of Scope

• Backend waitlist persistence.
• Tournament registration APIs.
• Leaderboards or matchmaking.
• Prize distribution logic.
• Authentication changes.

---

Benefits

• Replaces an unfinished placeholder with a polished branded experience.
• Informs users about upcoming tournament features.
• Increases engagement through an early-access waitlist.
• Provides a smooth navigation path back to the dashboard.
• Establishes a scalable foundation for future tournament functionality.

Category: Frontend Enhancement
Route: /tournament
Related Issue: #127
Priority: Medium
Test Coverage Target: ≥95%

[vercel]

@AYOMI-cmd is attempting to deploy a commit to the josephchimebuka's projects Team on Vercel.

A member of the Team first needs to authorize it.

[josephchimebuka]

@AYOMI-cmd Pls fix merge conflicts