Health Journey - Copy this React, Tailwind Component to your project
Header Section Title: "12 Week Health Journey" (large, bold, centered). Progress Bar (Circular): Displays overall journey progress (e.g., 20% Complete). Green glowing ring fills as progress increases. Hover animation for smooth scaling. Weekly Focus Highlight: Displays the theme for the current week (e.g., "Week 2 Gut Health Optimization"). Short motivational quote or affirmation below it. 2. Weekly Overview Card (Glass Panel) Card Title: "Week [X]: [Theme]" Goals Progress Bar: Linear progress bar with glowing green gradient fill for completed tasks. Checklist of Goals: Icons (e.g., checkmarks for completed tasks). Goal descriptions (e.g., “Drink 8–10 glasses of water daily”). Interactive toggle buttons to mark tasks as complete (green glow upon click). Daily Tasks Preview: Shows the day’s focus (e.g., "Morning walk & hydration check in"). Countdown timers for time bound activities. 3. Daily Focus Card (Glass Panel) Date Display: "Monday, Jan 8" (sticky header for each day). Task Breakdown: Mini checklists with glowing toggle switches. Sub tasks (e.g., log meals, measure water intake). Color indicators: Green Glow: Completed. Yellow Glow: In Progress. Gray Glow: Not Started. Notes Section (editable field) for user reflections or additional tasks. Supplement Reminders: Displays supplement recommendations and timers if applicable. Metrics Section: Tracks sleep, hydration, and workout minutes (bars or rings with animations). 4. Progress Tracking Panel Glassmorphic Dashboard (Sticky Sidebar): Circular Graphs: Displays hydration, sleep quality, and activity levels. Bar Graphs: Tracks weekly meal logging and consistency. Green Pulse Animation: Highlights metrics exceeding goals. Milestone Indicators (Icons): Trophy or Medal icons for completed weeks. Hover effects to view achievements and key habits built. Goal Adjustment Buttons: Allows users to update goals with sliders or dropdowns. 5. Motivational Corner Daily Quote Card: Inspirational health quotes or affirmations. Tip of the Day: Displays small tips for improving habits (e.g., “Try deep breathing for 5 minutes before meals”). Rewards Section: Virtual badges for consistency streaks (7 day check ins). Unlockable levels with glowing animations. 6. Call to Action Buttons (Blue Gradient) Complete Task Button: Hover effect: Pulsing light blue glow. Completed tasks: Transitions to green with a checkmark animation. Reschedule Task Button: Slight red glow for urgency and pending tasks. Edit Goals Button: Interactive sliders for setting targets.
