FitnessHub is a dynamic fitness-oriented website offering a comprehensive experience for users interested in various fitness programs, including classes, personal training, and nutrition plans. This project is designed to create an engaging environment for fitness enthusiasts, with user-friendly features, interactive elements, and a responsive design.
-
Dynamic Classes and Booking: Users can explore various fitness classes (e.g., Yoga, HIIT, Strength), with detailed information on each session, including duration, calorie burn, difficulty, and instructor details. Although booking functionality is a work in progress, users can interact with each class through the "Book Now" button.
-
User Authentication: Includes login and logout options for managing user sessions. A mock authentication setup with pre-defined usernames and passwords allows users to simulate login and access personalized features, such as logged-in state and logout options.
-
Theme Toggle: Users can switch between light and dark themes, giving them control over the interface's appearance to match their preferences and enhance usability in different lighting conditions.
-
Filter and Search: Easily filter classes by type (e.g., Cardio, Strength, Yoga) through a visually engaging filter system that shows or hides classes based on user selection.
-
Interactive Elements: Includes a carousel for highlighting features, a theme toggle, an animated clock, and buttons that change the page's background color on click.
-
Accordion FAQ: An FAQ section designed with an accordion structure to provide quick access to common questions. This feature allows users to expand or collapse answers to frequently asked questions, keeping the interface clean and easy to navigate. Users can expand each item to read detailed responses without leaving the page.
User preferences, such as selected theme (light/dark) and class filter options, are managed directly within the client side through JavaScript. The theme toggle updates the color scheme dynamically, applying either the light or dark theme based on the user’s preference. This setting is retained during the session, allowing for a seamless and customized user experience each time the site is loaded.
Explore FitnessHub today to take your fitness journey to the next level with classes, community, and expert guidance!