From 43c0f9779f2d09be9f766592bd273a7d7b76fed8 Mon Sep 17 00:00:00 2001
From: Jacob Maynard
Date: Fri, 1 May 2026 05:50:32 -0500
Subject: [PATCH 1/2] add onboarding flows for new users
Closes #511
---
packages/web/src/components/Hero.tsx | 4 +-
.../components/dashboard/ContactPrompt.tsx | 12 +--
.../src/components/dashboard/Dashboard.tsx | 25 ++++-
.../dashboard/LocalAppraisalsSection.tsx | 5 +-
.../src/components/dashboard/QuickActions.tsx | 93 ++++++++-----------
.../src/components/dashboard/WelcomeCard.tsx | 60 ++++++++++++
.../web/src/routes/_app/checklist.index.tsx | 7 +-
packages/web/src/routes/_auth/signin.tsx | 6 +-
packages/web/src/routes/pricing.tsx | 4 +-
9 files changed, 145 insertions(+), 71 deletions(-)
create mode 100644 packages/web/src/components/dashboard/WelcomeCard.tsx
diff --git a/packages/web/src/components/Hero.tsx b/packages/web/src/components/Hero.tsx
index 5d55eca66..00bd670ee 100644
--- a/packages/web/src/components/Hero.tsx
+++ b/packages/web/src/components/Hero.tsx
@@ -20,7 +20,7 @@ export default function Hero() {
real-time collaboration, and automation that improve transparency and efficiency at
every stage.
-
+
Start a Review Project
diff --git a/packages/web/src/components/dashboard/ContactPrompt.tsx b/packages/web/src/components/dashboard/ContactPrompt.tsx
index 90e753e1c..251102154 100644
--- a/packages/web/src/components/dashboard/ContactPrompt.tsx
+++ b/packages/web/src/components/dashboard/ContactPrompt.tsx
@@ -10,12 +10,12 @@ interface ContactPromptProps {
export function ContactPrompt({ restrictionType, projectCount, quotaLimit }: ContactPromptProps) {
const title =
- restrictionType === 'entitlement' ? 'Early Access Testing' : 'Project Limit Reached';
+ restrictionType === 'entitlement' ? 'Ready to Collaborate?' : 'Project Limit Reached';
const message =
restrictionType === 'entitlement' ?
- "CoRATES is currently in early access testing as we test and refine project-based features in collaboration with early users. If you're interested in creating a project and sharing feedback, please contact us to request access. Individual appraisals are always available and free to use."
- : `You've reached your project limit (${projectCount}/${quotaLimit === null || quotaLimit === -1 ? 'unlimited' : quotaLimit}). Request early access for more projects.`;
+ 'Projects let your team appraise studies independently and resolve disagreements together. Start a 14-day free trial to create your first project -- no credit card required.'
+ : `You've reached your project limit (${projectCount}/${quotaLimit === null || quotaLimit === -1 ? 'unlimited' : quotaLimit}). Upgrade your plan to create more projects.`;
return (
@@ -24,12 +24,10 @@ export function ContactPrompt({ restrictionType, projectCount, quotaLimit }: Con
+ Use AMSTAR 2, ROBINS-I, or RoB 2 to appraise studies on this device with optional PDF
+ annotation
+ ))}
+
);
}
diff --git a/packages/web/src/components/dashboard/WelcomeCard.tsx b/packages/web/src/components/dashboard/WelcomeCard.tsx
new file mode 100644
index 000000000..686a18e9c
--- /dev/null
+++ b/packages/web/src/components/dashboard/WelcomeCard.tsx
@@ -0,0 +1,60 @@
+/**
+ * WelcomeCard - First-time user onboarding with quick actions
+ *
+ * Shown on the dashboard for logged-in users who haven't dismissed it.
+ * Replaces the standard DashboardHeader greeting until dismissed.
+ */
+
+import { Link } from '@tanstack/react-router';
+import { XIcon } from 'lucide-react';
+import type { AuthUser } from '@/stores/authStore';
+import { useAnimation } from './useInitialAnimation';
+import { QuickActions } from './QuickActions';
+
+interface WelcomeCardProps {
+ user: AuthUser;
+ onDismiss: () => void;
+}
+
+export function WelcomeCard({ user, onDismiss }: WelcomeCardProps) {
+ const animation = useAnimation();
+ const firstName = user.givenName || user.name || '';
+
+ return (
+
+
+
+
+
+
+
+
+ Welcome{firstName ? `, ${firstName}` : ''}
+
+
+ Start appraising studies right away. Pick a tool below to create your first appraisal.
+
+
+
+
+
+
+
+ Local appraisals are saved on this
+ device and always free. Projects{' '}
+ let teams appraise independently and resolve disagreements together.{' '}
+
+ Explore plans
+ {' '}
+ when you're ready to collaborate.
+
- Start with a free trial, then choose the plan that fits your team's needs.
+ Individual appraisals with PDF annotation and export are always free.
+
+ Choose a plan when you're ready to collaborate with your team.