Merge pull request #295 from Yusufolosun/fix/onboarding-flow-wizard

Add guided onboarding wizard for new users on dashboard

Author: Mystery-CLI

app/src/App.css

@@ -50,3 +50,188 @@ body {
   width: 100%;
   margin: 0 auto;
 }
+
+.onboarding {
+  background: #fff;
+  border: 1px solid #e1e3e8;
+  border-radius: 12px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.onboarding-header {
+  margin-bottom: 1rem;
+}
+
+.onboarding-header h2 {
+  font-size: 1.2rem;
+  margin-bottom: 0.4rem;
+}
+
+.onboarding-header p {
+  color: #595f6b;
+  font-size: 0.95rem;
+}
+
+.onboarding-progress {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: #edf1f6;
+  margin-top: 0.75rem;
+  overflow: hidden;
+}
+
+.onboarding-progress-bar {
+  height: 100%;
+  background: #1a1a2e;
+  transition: width 200ms ease;
+}
+
+.onboarding-steps {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.onboarding-step {
+  width: 100%;
+  border: 1px solid #dde2ea;
+  border-radius: 10px;
+  background: #f9fbff;
+  padding: 0.7rem;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.onboarding-step.active {
+  border-color: #1a1a2e;
+  background: #f2f5ff;
+}
+
+.onboarding-step-index {
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 999px;
+  background: #1a1a2e;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.onboarding-step-content {
+  display: grid;
+}
+
+.onboarding-step-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #212633;
+}
+
+.onboarding-step-status {
+  font-size: 0.8rem;
+  margin-top: 0.2rem;
+  color: #6c7381;
+}
+
+.onboarding-step-status.completed {
+  color: #067647;
+}
+
+.onboarding-step-status.skipped {
+  color: #b54708;
+}
+
+.onboarding-card {
+  border: 1px solid #dde2ea;
+  border-radius: 10px;
+  padding: 1rem;
+  background: #fff;
+}
+
+.onboarding-card h3 {
+  font-size: 1.05rem;
+  margin-bottom: 0.5rem;
+}
+
+.onboarding-card > p {
+  color: #4d5565;
+  margin-bottom: 0.8rem;
+}
+
+.onboarding-tutorial {
+  border-top: 1px solid #edf1f6;
+  padding-top: 0.8rem;
+}
+
+.onboarding-tutorial h4 {
+  font-size: 0.95rem;
+  margin-bottom: 0.5rem;
+}
+
+.onboarding-tutorial ul {
+  margin: 0 0 0.75rem 1.2rem;
+  color: #4d5565;
+}
+
+.onboarding-tutorial li {
+  margin-bottom: 0.35rem;
+}
+
+.onboarding-link {
+  color: #1a1a2e;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.onboarding-link:hover {
+  text-decoration: underline;
+}
+
+.onboarding-controls,
+.onboarding-actions,
+.onboarding-summary-actions {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  margin-top: 0.9rem;
+}
+
+.onboarding-btn {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0.45rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.onboarding-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.onboarding-btn.primary {
+  background: #1a1a2e;
+  color: #fff;
+}
+
+.onboarding-btn.secondary {
+  border-color: #ccd4e0;
+  background: #fff;
+  color: #2f3746;
+}
+
+.onboarding-btn.danger {
+  border-color: #f2c6c6;
+  background: #fff5f5;
+  color: #912018;
+}