Frontend Challenge v24.07.24

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

For this challenge, I created a landing page for the New York Recreational Cricket League. The goal was to design a modern, user-friendly interface that effectively communicates the league’s offerings and engages potential members. The page features:

A Header: Showcases the league’s name and a call-to-action button for contacting us.
A Navigation Bar: Provides smooth navigation between different sections of the page.

Main Sections:

• About the League: Details about the league and its benefits.
• Location of Games: Information on where games are held and how to get there.
• Season Schedule: Highlights important dates and events for the upcoming season.
• Membership Info Dialog: A modal with detailed membership options and benefits, accessible from a button within the “About” section.

Demo

Deployed(live) Website: Click to go website
Source Code: Click to go website
Feel free to contribute :)

Journey

Process and Learning

• Design & Development: I used Tailwind CSS for its utility-first approach to create a responsive and visually appealing layout. I aimed for a modern design with a focus on usability and accessibility.
• Dialog Implementation: Implemented a modal dialog for membership information that pops up when a button is clicked, enhancing user engagement.
• Page Transitions: Added smooth transitions between sections to provide a seamless user experience.

• Loading Animation: Included a loading animation that fades out after a short delay to enhance perceived performance.
  Challenges & Solutions

• Navbar Overlap with Dialog: Ensured that the dialog does not interfere with the navbar by using z-index effectively.

• Responsive Design: Tested the layout on various screen sizes to ensure responsiveness.

• What I'm Proud Of

• Interactive Features: The modal dialog and dynamic section transitions provide an interactive experience.

• Responsive Layout: The site looks great on both desktop and mobile devices, thanks to Tailwind CSS.

This project protect under MIT License!