Guide new users with an interactive tour highlighting key features

Implements an onboarding tour using React, TypeScript, and CSS to guide users.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/44c8f610-b797-4c56-a2e5-1122aff07267.jpg

client/src/index.css

@@ -110,6 +110,30 @@
     }
   }
 
+  /* Onboarding Tour Styles */
+  .tour-highlight {
+    position: relative;
+    z-index: 60;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
+    border-radius: 8px;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .tour-pulse {
+    animation: tour-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes tour-pulse {
+    0%, 100% {
+      transform: scale(1);
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
+    }
+    50% {
+      transform: scale(1.02);
+      box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3);
+    }
+  }
+
   /* Custom scrollbars */
   ::-webkit-scrollbar {
     width: 6px;