Workout Plans Page - Copy this React, Tailwind Component to your project

Design a Workout Plans Page for a fitness website, where users can set, track, and update their fitness goals in a modern, sleek layout using a mix of white and #0066ee colors. The page should provide personalized workout plans and allow users to adjust their workouts based on their fitness goals. Each section should be interactive and provide a seamless experience. Here's the structure: Page Layout Header Section Page Title: "Your Personalized Workout Plans". Subtitle: "Track your goals, set your workout routines, and achieve fitness results." Navigation Link: "Back to Dashboard" (Button to return to the user’s dashboard). Goal Tracking & Workout Sections Goal Setting: A prominent Goal Overview section that displays the user’s primary fitness goals (e.g., Lose Weight, Build Muscle, Improve Endurance, Increase Flexibility). Goal Cards: Each goal has a card with a progress bar, target metrics (e.g., target weight loss, muscle gain, etc.), and a button to adjust goals or set new ones. Example: Goal: Lose 5 kg in 3 months Progress: 25% Complete (with a progress bar). Button: Adjust Goal Ability to add multiple goals with custom timelines (e.g., Short Term Goal: 4 week challenge, Long Term Goal: 6 month fitness transformation). Custom Workout Plans: Personalized Workout Sections for each goal (e.g., Weight Loss, Muscle Gain, Endurance) with: Warm Up: Suggested exercises to start. Main Workout: A set of recommended exercises with sets, reps, and rest time (adjusted to the goal). Cooldown: Stretches or relaxation exercises. Rest Days: Display scheduled rest days based on the user’s plan. Each workout plan should allow users to check off completed exercises and log the weight or reps used, with updates reflected in real time. Weekly/Monthly View: Calendar style view to plan and track workouts with weekly/monthly breakdowns. Option to switch between workout plan view and calendar view to see progress on a day to day basis. Ability to drag and drop exercises into the calendar and adjust schedules if necessary. Option to filter workouts based on muscle groups (e.g., Full Body, Upper Body, Lower Body). Exercise Library: Searchable Exercise Database with a variety of exercises (categorized by muscle group or goal type). Each exercise should have a video demo with a description and tips for correct form. Option to add exercises to the current workout routine directly from the library. Progress Tracking: Progress Chart: Show the user’s progress toward their fitness goals with visual graphs (e.g., weight loss, strength gain, endurance increase). Weekly/Monthly Summary: Track total sets, reps, and calories burned. Workout History: Log all completed workouts, showing metrics like total calories burned, muscle groups targeted, etc. Achievement Badges: Award badges for completing challenges or achieving fitness milestones (e.g., 30 day workout streak, Squat 100 kg). AI Recommendations: AI powered suggestions for additional exercises or adjustments based on the user’s progress and goals. Recommend new exercises or routines based on the user’s workout history. Footer Section Save & Update Plan: Button to save or update the workout plan and goals. Reset Plan: Option to reset workout plan and start fresh. Progress Summary: Button to view detailed progress reports on the Progress Reports Page. Logout: Option to log out of the user account. Navigation Links (Navbar) Dashboard: Link to the main dashboard to view summary data. Track Meals: Link to the food log page. Progress Reports: View detailed progress on nutrition and fitness. Goals & Milestones: View or update fitness goals and track achievements. Community: Participate in fitness challenges or interact with others. Resources: Read fitness guides, tips, and blogs. Tools: Access fitness calculators or tools like BMI and calorie estimators. Settings: Manage user preferences and profile. Design Considerations Responsive Layout: Design should adapt well to both desktop and mobile devices, ensuring easy interaction on all screen sizes. Interactive Elements: Smooth animations for updating progress bars, checking off exercises, and adding new workouts. Real Time Updates: All entries and progress should update dynamically on the page without needing to refresh. Typography: Use modern fonts that are easy to read, with larger headings for goal and progress areas. Color Scheme: A blend of white and #0066ee colors with soft accents to maintain a clean and motivating aesthetic.