Added onboarding progress tracking & landing page

frontend/src/hooks/usePerformanceMonitor.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+interface PerformanceMetrics {
+  loadTime: number;
+  renderTime: number;
+  memoryUsage?: number;
+}
+
+export const usePerformanceMonitor = (componentName: string) => {
+  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
+
+  useEffect(() => {
+    const startTime = performance.now();
+    
+    // Monitor memory usage if available
+    const getMemoryUsage = () => {
+      if ('memory' in performance) {
+        return (performance as any).memory.usedJSHeapSize / 1024 / 1024; // MB
+      }
+      return undefined;
+    };
+
+    const measurePerformance = () => {
+      const endTime = performance.now();
+      const loadTime = endTime - startTime;
+      
+      setMetrics({
+        loadTime,
+        renderTime: loadTime,
+        memoryUsage: getMemoryUsage()
+      });
+
+      // Log performance metrics in development
+      if (process.env.NODE_ENV === 'development') {
+        console.log(`Performance metrics for ${componentName}:`, {
+          loadTime: `${loadTime.toFixed(2)}ms`,
+          memoryUsage: getMemoryUsage() ? `${getMemoryUsage()?.toFixed(2)}MB` : 'N/A'
+        });
+      }
+    };
+
+    // Use requestAnimationFrame to measure after render
+    const rafId = requestAnimationFrame(measurePerformance);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [componentName]);
+
+  return metrics;
+};
+
+export default usePerformanceMonitor;