Health Assessment Form - Copy this React, Tailwind Component to your project

Create a stunning UI page with components for the following: Health Assessment Form Process **1. Onboarding & Welcome Screen Purpose: Introduce the user to the assessment process. Design: Title: "Welcome to Your Health Assessment." Description: Brief explanation of the purpose and how it will help the user. Action Button: "Start Assessment." Progress Bar: Show progress (e.g., Step 0 of X). **2. Questionnaire Flow with Sections The questions are broken into sections for better focus, making the form less overwhelming. Section 1: Health Overview Purpose: Capture general health information like pre existing conditions and demographic details. Questions: Pre Existing Conditions (Multiple choice with checkboxes). Age (Number input). Height (ft/in) and Weight (lbs) inputs side by side. Target Weight (lbs) input. Features: Dynamic Validation: Show BMI calculation dynamically as height and weight are inputted. Tooltips: Provide brief explanations of terms (e.g., "BMI is Body Mass Index, used to assess general health"). Section 2: Activity & Lifestyle Purpose: Gather activity, sleep, and hydration habits. Questions: Activity Level (Single choice with icons: Sedentary, Lightly Active, etc.). Workouts Per Week (Slider from 0–7). Sleep Hours (Slider from 0–10). Sleep Quality (Radio buttons with visual indicators: "Very Poor" to "Very Good"). Water Intake (Slider from 0–12 glasses). Features: Engaging Sliders: Include a fun, interactive slider design with visual feedback (e.g., water drops for hydration). Micro interactions: Animate icons (e.g., a sleeping icon fills as sleep hours increase). Section 3: Mental & Emotional Wellness Purpose: Assess stress, anxiety, and mental health factors. Questions: Chronic Stress (Yes/No toggle). Do you feel bloating after eating? (Yes/No toggle). Do you feel Depression, Stress, or Anxiety? (Multi select options). Follow Up: "Does it ever impact your work?" (If "Yes"). Features: Conditional Questions: Show follow ups based on responses (e.g., If "Yes" to feeling anxiety, show follow up about work impact). Visual Elements: Use calming icons (e.g., stress icon with a brain illustration). Section 4: Medical History Purpose: Understand medical background and openness to natural treatments. Questions: Autoimmune Disorder (Yes/No toggle). Chronic Pain or Frequent Headaches (Yes/No toggle). Are you currently taking Medication? (Yes/No toggle). Have you taken any antibiotics in the last six months? (Yes/No toggle). Are you open to taking Natural Supplements? (Yes/No toggle). Features: Dynamic Suggestions: After completion, suggest categories of products based on responses. 3. Confirmation & Results Purpose: Provide feedback to users after completing the assessment. Design: Title: "You're All Set!" Description: Brief summary of how their responses will be used to recommend products or solutions. Button: "View Your Wellness Plan." Key Features of the Form Progress Bar: Display progress at the top of the form (e.g., "Step 2 of 5"). Include motivational text, such as "You're halfway there!" Conditional Logic: Dynamically hide or show follow up questions based on answers (e.g., showing stress related questions only if the user indicates stress). Interactive Elements: Sliders, toggle switches, and clickable icons make the form engaging. Tooltips & Explanations: Add small question marks or info icons next to complex terms (e.g., "What is BMI?"). Mobile Optimization: Ensure responsive design for easy completion on smartphones. Sample UI Concepts Visual Design Color Palette: Purple (#6C63FF): Primary highlights. Light Blue (#D9E8FF): Background accents. Blue (#4E91FF): Button and link highlights. White (#FFFFFF): Form background. Gray (#666666): Secondary text. Typography: Titles: Bold, 18px. Body Text: Regular, 16px. Buttons: Bold, 16px, uppercase. Icons & Visuals: Use friendly icons for categories (e.g., water drops for hydration, sleeping icons for sleep).