Onboarding

import { MultiStepWizard } from "@launchapp/design-system/blocks/onboarding";const steps = [  { id: "basics", title: "Basic Info", content: <div className="p-4">Name and email form</div> },  { id: "plan", title: "Choose Plan", content: <div className="p-4">Plan selection</div> },  { id: "payment", title: "Payment", content: <div className="p-4">Payment form</div> },];export default function Page() {  return <MultiStepWizard steps={steps} onComplete={() => console.log("complete")} />;}

import { ProgressStepper } from "@launchapp/design-system/blocks/onboarding";const steps = [  { id: "profile", title: "Profile", completed: true },  { id: "billing", title: "Billing", completed: true },  { id: "review", title: "Review", completed: false, current: true },  { id: "launch", title: "Launch", completed: false },];export default function Page() {  return <ProgressStepper steps={steps} orientation="horizontal" />;}

import { SetupChecklist } from "@launchapp/design-system/blocks/onboarding";const steps = [  { id: "verify", title: "Verify your email", completed: true, href: "#" },  { id: "profile", title: "Complete your profile", completed: false, href: "/settings/profile" },  { id: "invite", title: "Invite your team", completed: false, href: "/team/invite" },  { id: "integrate", title: "Set up an integration", completed: false, href: "/integrations" },];export default function Page() {  return <SetupChecklist steps={steps} title="Complete setup" />;}

import { OnboardingWizard } from "@launchapp/design-system/blocks/onboarding";const steps = [  { id: "profile", title: "Set up profile", description: "Tell us about yourself.", content: <div>Profile form</div> },  { id: "team", title: "Invite team", description: "Add your teammates.", content: <div>Invite form</div> },  { id: "done", title: "You're all set!", description: "Start using the app.", content: <div>Completion screen</div> },];export default function Page() {  return (    <OnboardingWizard      steps={steps}      onComplete={() => console.log("done")}      allowSkip    />  );}

import { WelcomeScreen } from "@launchapp/design-system/blocks/onboarding";export default function Page() {  return (    <WelcomeScreen      productName="LaunchApp"      tagline="Build your SaaS faster"      onGetStarted={() => console.log("get started")}    />  );}

import { OnboardingChecklist } from "@launchapp/design-system/blocks/onboarding";const tasks = [  { id: "profile", title: "Complete your profile", completed: true, href: "/settings/profile" },  { id: "team", title: "Invite teammates", completed: false, href: "/team/invite" },  { id: "billing", title: "Set up billing", completed: false, href: "/billing" },];export default function Page() {  return <OnboardingChecklist tasks={tasks} onComplete={(id) => console.log("complete", id)} />;}

import { SetupWizard } from "@launchapp/design-system/blocks/onboarding";const steps = [  { id: "workspace", title: "Create workspace", content: <div>Workspace form</div> },  { id: "integrations", title: "Connect tools", content: <div>Integrations form</div> },];export default function Page() {  return <SetupWizard steps={steps} onFinish={() => console.log("finish")} />;}

import { TeamInviteFlow } from "@launchapp/design-system/blocks/onboarding";export default function Page() {  return (    <TeamInviteFlow      roles={["admin", "member", "viewer"]}      onInvite={(invites) => console.log("invite", invites)}      onSkip={() => console.log("skip")}    />  );}

import { GoalSetupWizard } from "@launchapp/design-system/blocks/onboarding";const goals = [  { id: "launch", label: "Launch my product", icon: <span>🚀</span> },  { id: "grow", label: "Grow my team", icon: <span>👥</span> },  { id: "automate", label: "Automate workflows", icon: <span>⚙️</span> },];export default function Page() {  return (    <GoalSetupWizard      goals={goals}      onComplete={(selected) => console.log("goals", selected)}    />  );}

import { ProgressChecklist } from "@launchapp/design-system/blocks/onboarding";const items = [  { id: "1", label: "Create account", completed: true },  { id: "2", label: "Verify email", completed: true },  { id: "3", label: "Set up workspace", completed: false },  { id: "4", label: "Invite team", completed: false },];export default function Page() {  return <ProgressChecklist items={items} title="Getting started" />;}

import { ChecklistWithLinks } from "@launchapp/design-system/blocks/onboarding";const items = [  { id: "profile", label: "Complete profile", href: "/settings/profile", completed: true },  { id: "billing", label: "Add payment method", href: "/billing", completed: false },];export default function Page() {  return <ChecklistWithLinks items={items} title="Setup checklist" />;}

import { OnboardingStepper } from "@launchapp/design-system/blocks/onboarding";const steps = [  { id: "profile", label: "Profile" },  { id: "team", label: "Team" },  { id: "billing", label: "Billing" },];export default function Page() {  return <OnboardingStepper steps={steps} currentStep={1} />;}

import { WelcomeWizard } from "@launchapp/design-system/blocks/onboarding";export default function Page() {  return (    <WelcomeWizard      productName="LaunchApp"      onComplete={(data) => console.log("complete", data)}    />  );}