Homepage for the exciting upcoming events hosted by the Mozilla Firefox Club. It includes a dynamic timeline of upcoming events, highlights from past events, a sponsor section to recognize the amazing companies that support the community, and an interactive hero section with a unique mouse cursor animation.
The hero section features an engaging and interactive cursor animation. As the user moves the mouse across the page, small balls (resembling planets) follow the cursor's movement. These balls move dynamically in response to the cursor's position, creating an engaging and visually stimulating experience for users. This interactive animation enhances the user experience and adds a fun, playful element to the website.
The website incorporates a smooth scrolling feature for easy navigation between sections. By clicking on links in the navigation bar, users are smoothly scrolled to the corresponding section, creating a seamless and polished browsing experience. This is implemented using the react-scroll library with customizable scroll duration and offset to ensure precision.
The website features a visually engaging timeline that highlights upcoming events. The timeline is structured to show events from left to right, with each event represented by a card containing key details, such as the event name, date, and description. Users can easily follow the progression of events over time.
For those interested in past events, the website includes a section that highlights key moments from previous Mozilla Firefox Club events. This section aims to provide an overview of the impactful activities and experiences that have shaped the community.
The sponsor section recognizes the generous companies that support the Mozilla Firefox Club. This section displays the logos of our sponsors, acknowledging their contribution to making the events possible. The logos are displayed in a responsive grid layout, ensuring they are visible and accessible on all screen sizes.
- React: For building the user interface with a component-based structure.
- Tailwind CSS: For styling the website with a responsive design system.
- JavaScript/JSX: For logic and rendering of dynamic content such as events and sponsor logos.
- React Scroll: For implementing smooth scrolling navigation with adjustable duration and offset.
- React Slick: For creating a responsive carousel for sponsor logos.