import * as React from "react"; import { Database, Headphones, LifeBuoy, PlayCircle, ShieldCheck, Users, } from "lucide-react"; import { EmptyStateGuidedWorkspaceSetupOne } from "@/registry/empty-state-guided-workspace-setup-one/empty-state-guided-workspace-setup-one"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof EmptyStateGuidedWorkspaceSetupOne >; const tasks: ComponentProps["tasks"] = [ { id: "tour", title: "Complete the product tour", description: "Review the workspace tour so you can orient new teammates with confidence.", estimatedTime: "4 min", helper: { tooltip: "Discover the navigation, dashboards, and quick actions in minutes.", popoverTitle: "Tour highlights", popoverDescription: "See how teams live inside the dashboard with best practices for day-one activation.", popoverHighlights: [ "Navigation shortcuts for keyboard-driven admins", "Recommended dashboards to bookmark for weekly reviews", "Field mappings visualized before importing customer data", ], }, }, { id: "import", title: "Import historical data", description: "Bring in customer and pipeline data to power dashboards and trigger alerts.", estimatedTime: "6 min", helper: { tooltip: "Sync CSVs or connect directly with Salesforce, HubSpot, or Snowflake.", popoverTitle: "Ingestion playbook", popoverDescription: "Align fields across systems, preview records, and track load status in real time.", popoverHighlights: [ "Automated dedupe on account IDs and opportunity names", "Data quality scoring with anomaly flags", "Sample dashboard view unlocked after the first sync", ], }, }, { id: "invite", title: "Invite teammates", description: "Share access with GTM leaders and ops partners so collaboration starts immediately.", estimatedTime: "2 min", helper: { tooltip: "Add individuals or bulk import from your HRIS.", popoverTitle: "Roles & guardrails", popoverDescription: "Assign workspaces, set approval flows, and automate welcome nudges by persona.", popoverHighlights: [ "Role templates for revenue ops, finance, and success", "Usage guardrails for view-only observers", "SLA monitoring on invites awaiting acceptance", ], }, }, { id: "integrations", title: "Connect integrations", description: "Enable Slack, Segment, and billing syncs so alerts and workflows stay in sync.", estimatedTime: "5 min", helper: { tooltip: "Push insights into the channels your team already checks every day.", popoverTitle: "Integration guardrails", popoverDescription: "Secure credentials with scoped keys, test automations, and preview payloads before launching.", popoverHighlights: [ "Slack channel mapping with escalation preferences", "Segment event naming with auto-generated schemas", "Billing metrics aligned to ARR and retention dashboards", ], }, }, ]; const helperCard: ComponentProps["helperCard"] = { title: "Need a pit stop?", description: "Use guided playbooks and office hours to unblock yourself before go-live.", actions: [ { id: "office-hours", label: "Book onboarding office hours", icon: Headphones, href: "https://cal.com", }, { id: "playbook", label: "Download launch playbook", icon: LifeBuoy, href: "https://usenextbase.com/resources", }, ], footnote: "Live support is available Monday–Friday, 8am–6pm PT.", }; const resources: ComponentProps["resources"] = { triggerLabel: "Watch the onboarding walkthrough", sheetTitle: "Workspace onboarding resources", sheetDescription: "Learn how teams move from data import to activation in under a week.", items: [ { id: "video-tour", title: "Workspace overview in five minutes", description: "See how admins build dashboards and activate automations.", type: "video", duration: "5 min", href: "https://www.loom.com", }, { id: "playbook", title: "Migration checklist for revenue teams", description: "Step-by-step sequencing for importing CRM records and sharing readouts.", type: "guide", duration: "12 steps", href: "https://usenextbase.com/guides/migration", }, { id: "faq", title: "FAQ: Connecting integrations securely", description: "Credential management, scopes, and compliance callouts.", type: "article", duration: "6 min", href: "https://usenextbase.com/help/integrations", }, ], }; const illustration: ComponentProps["illustration"] = { headline: "Welcome to your guided workspace", description: "Personalize the dashboard, unlock best-practice playbooks, and bring teammates along for the journey.", alt: "Workspace illustration showing analytics widgets and guided steps.", gradientFrom: "from-primary/40", gradientVia: "via-sky-500/40", gradientTo: "to-emerald-400/30", socialProof: [ { id: "activation-rate", label: "78% faster onboarding", description: "Teams go live within 10 days when following the guided checklist.", icon: ShieldCheck, }, { id: "community", label: "6,200+ admins", description: "Share templates and playbooks inside the Nextbase workspace community.", icon: Users, }, ], }; export function EmptyStateGuidedWorkspaceSetupOneDemo() { const [completedTasks, setCompletedTasks] = React.useState([]); const [skipWelcome, setSkipWelcome] = React.useState(false); return (

Activation pulse

{completedTasks.length === tasks.length ? "Checklist complete — data sources are ready for go-live." : `Keep going! ${tasks.length - completedTasks.length} steps remaining before launch.`}

console.info("Connect data source clicked"), }} secondaryAction={{ label: "Invite teammates", icon: Users, onClick: () => console.info("Invite teammates clicked"), }} ghostAction={{ label: "Replay walkthrough", icon: PlayCircle, onClick: () => console.info("Replay walkthrough clicked"), }} skipWelcome={{ label: "Skip welcome illustration next time", description: "You can always restore the hero card from workspace preferences.", defaultChecked: skipWelcome, onCheckedChange: setSkipWelcome, }} initialCompletedTaskIds={completedTasks} onTaskCompletionChange={setCompletedTasks} />

); } export default EmptyStateGuidedWorkspaceSetupOneDemo;

Simple