UI Display Issues in EventMint on Desktop Screen

[himanshumishra1309]

I have identified several UI and routing issues in [App Name] that affect the overall user experience and accessibility on desktop. These issues lead to confusion for users, impact readability, and interrupt navigation flow. Below are the issues, each with a detailed description, screenshots, and proposed solutions.

Identified Issues:

1] Header Navigation Highlighting Issue

• Description: When navigating between sections of the app (e.g., "Play," "Sports Activities," "List Your Shows," "Offers," "Gift Cards"), both the "Movie" tab and the current section are highlighted in the header. This gives the impression that multiple sections are active simultaneously, which can be confusing.
• Expected Behavior: Only the current section should be highlighted to provide clear navigation feedback.
• Proposed Solution: Update the header’s JavaScript or React state management logic to ensure only the active tab is highlighted. This will improve clarity for users, allowing them to easily recognize which section they are currently viewing.
• Screenshot:
  

2] Broken Routes on Desktop

• Description: The following routes result in a blank page instead of displaying content or an error message:
  https://eventmint.vercel.app/stream-events
  https://eventmint.vercel.app/corporates
• User Experience Impact: Users may be confused about whether their internet connection is causing the issue or if the page is simply empty. Providing feedback here would improve user confidence and clarify the app’s current state.
• Proposed Solution: Display a user-friendly message, such as "This page is under development," for routes that are not yet functional. This small addition can enhance user experience by managing expectations.
• Screenshot:
  

3] Non-Uniform Card Layout in the "Play" Section

• Description: The cards in the "Play" section lack uniform sizing, which creates a visually inconsistent layout and affects the aesthetic appeal of the page.
• Expected Behavior: Cards should have a uniform height and width to create a clean, balanced layout.
• Proposed Solution: Adjust the CSS styling for the card components to ensure consistent dimensions. Implementing flexbox or grid layouts with fixed dimensions for the cards can achieve this visual consistency.
• Screenshot:
  

I am experienced with the technologies used in this project and skilled in the MERN stack, making me well-suited to address both frontend and backend issues. I would be more than happy to contribute fixes for these UI and routing issues. If the maintainers are open to it, I can start by addressing one or all of these problems, ensuring that the solutions align with the project’s overall design and functionality standards.

If you would like me to submit a pull request with these fixes, please let me know. I am open to feedback on my proposed solutions and would appreciate any guidance on project-specific coding standards or best practices.

Additionally, if you need assistance with backend development or other aspects of the project, please feel free to reach out to me. Here is my LinkedIn profile for contact: www.linkedin.com/in/himanshu-mishra-459b882b4.

[github-actions]

👋 Thank you for raising an issue! We appreciate your effort in helping us improve. Our Eventmint team will review it shortly. Stay tuned!

[samyakmaitre]

Hi there,
Thank you for the suggestion! Please go ahead, resolve issue and create a pull request. I will review and cooperate to merge it with the appropriate labels. Please sync fork and then work on your issue. Don't forget to connect on Github....

Best regards,
Samyak