Initial commit: Complete NodeJS-native setup

- Migrated from Python pre-commit to NodeJS-native solution
- Reorganized documentation structure
- Set up Husky + lint-staged for efficient pre-commit hooks
- Fixed Dockerfile healthcheck issue
- Added comprehensive documentation index

components/modals/OnboardingModal.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { PillIcon, PlusIcon, CheckCircleIcon } from './icons/Icons';
+
+interface OnboardingModalProps {
+  isOpen: boolean;
+  onComplete: () => void;
+}
+
+const onboardingSteps = [
+  {
+    icon: PillIcon,
+    title: 'Welcome to Medication Reminder!',
+    description:
+      'This quick tour will show you how to get the most out of the app.',
+  },
+  {
+    icon: PlusIcon,
+    title: 'Add Your Medications',
+    description:
+      "Start by clicking the 'Add Medication' button. You can set the name, dosage, frequency, and a custom icon.",
+  },
+  {
+    icon: CheckCircleIcon,
+    title: 'Track Your Doses',
+    description:
+      "Your daily schedule will appear on the main screen. Simply tap 'Take' to record a dose and stay on track with your health.",
+  },
+];
+
+const OnboardingModal: React.FC<OnboardingModalProps> = ({
+  isOpen,
+  onComplete,
+}) => {
+  const [step, setStep] = useState(0);
+  const currentStep = onboardingSteps[step];
+  const isLastStep = step === onboardingSteps.length - 1;
+
+  const handleNext = () => {
+    if (isLastStep) {
+      onComplete();
+    } else {
+      setStep(s => s + 1);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className='fixed inset-0 bg-black bg-opacity-60 dark:bg-opacity-80 z-50 flex justify-center items-center p-4'>
+      <div className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-sm text-center p-8 m-4'>
+        <div className='mx-auto bg-indigo-100 dark:bg-indigo-900/50 rounded-full h-16 w-16 flex items-center justify-center mb-6'>
+          <currentStep.icon className='w-8 h-8 text-indigo-600 dark:text-indigo-400' />
+        </div>
+        <h2 className='text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2'>
+          {currentStep.title}
+        </h2>
+        <p className='text-slate-600 dark:text-slate-300 mb-8'>
+          {currentStep.description}
+        </p>
+
+        <div className='flex justify-center items-center mb-8 space-x-2'>
+          {onboardingSteps.map((_, index) => (
+            <div
+              key={index}
+              className={`w-2.5 h-2.5 rounded-full transition-colors ${step === index ? 'bg-indigo-600' : 'bg-slate-300 dark:bg-slate-600'}`}
+            />
+          ))}
+        </div>
+
+        <button
+          onClick={handleNext}
+          className='w-full px-4 py-3 text-lg font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800'
+        >
+          {isLastStep ? 'Get Started' : 'Next'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default OnboardingModal;