## What does this PR do?
- Redesigns and streamlines the onboarding flow for personal, team, and organization accounts
- Consolidates shared components and improves code organization
- Adds browser preview for better user experience during onboarding
- Simplifies the personal onboarding flow by removing the video integration step
- Enhances team onboarding with CSV upload functionality
## Visual Demo (For contributors especially)
#### Image Demo:
- The PR adds a new browser preview component that shows users how their profile/team will look during onboarding
- Redesigned UI with a more consistent layout across all onboarding steps
- Improved mobile responsiveness with better component organization
## Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code.
- [x] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
1. Test the complete onboarding flow for personal accounts:
- Start at `/onboarding/getting-started`
- Proceed through personal details and calendar setup
- Verify the flow completes successfully
2. Test the team onboarding flow:
- Start at `/onboarding/getting-started` and select team
- Complete team details
- Test the invite options including CSV upload
- Verify team creation works correctly
3. Test the organization onboarding flow:
- Start at `/onboarding/getting-started` and select organization
- Complete organization details and branding
- Test member invitations
- Verify organization creation works correctly
4. Verify browser preview functionality:
- Check that the preview updates in real-time as you enter information
- Confirm it displays correctly on different screen sizes
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
## What does this PR do?
Creates new onboarding UI components for the user onboarding flow, including:
- `OnboardingCard` - A reusable card component with title, subtitle, content, and footer sections
- `OnboardingLayout` - A layout component with progress indicators and sign-out functionality
- `OnboardingBrowserView` - A browser preview showing how the user's booking page will look
- `OnboardingCalendarBrowserView` - A calendar preview showing sample events
- `OnboardingInviteBrowserView` - A preview of the team invitation email
- Enhanced `PlanIcon` component with new variants and animations for organization and team plans
## Visual Demo (For contributors especially)
#### Image Demo:
The PR adds several visual components for the onboarding flow, including browser previews, calendar views, and animated plan icons with concentric rings and user avatars.
## Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code.
- [x] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
- Navigate to the onboarding flow to see the new components in action
- Test the layout with different screen sizes to ensure responsive behavior
- Verify that the browser previews render correctly with sample data
- Check that the plan icon animations work properly for different variants (single, team, organization)
- Ensure the calendar view displays sample events correctly
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
<img width="2778" height="1633" alt="CleanShot 2025-10-30 at 16 42 23" src="https://github.com/user-attachments/assets/45d84980-26c9-4cb4-ac85-21dc174dba35" />
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Added a sign-out button to the onboarding v3 layout and refactored Getting Started to use the shared OnboardingLayout for a consistent header and structure.
- **New Features**
- Sign-out button in the onboarding footer using next-auth (redirects to /auth/logout).
- Localized button label via useLocale.
- **Refactors**
- Getting Started view now wraps content with OnboardingLayout.
- Removed duplicated header and progress UI from the view.
- Simplified content container and spacing; layout handles max width and flex.
<sup>Written for commit 830bfd1. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
## What does this PR do?
This PR is stacked on https://github.com/calcom/cal.com/pull/24299 this adds the v3 flow for onboarding with teams.
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Adds the v3 team onboarding flow with Details, Brand, and Invite steps, including slug validation, branding, and member invites. Updates routing to support the Team plan and creates teams with Stripe checkout when needed.
- **New Features**
- Team Details: name and slug with async availability check and URL preview.
- Team Brand: hex color picker and logo upload with live preview.
- Team Invite: add/remove emails, invite role toggle (Member/Admin), and form validation.
- State: adds teamDetails, teamBrand, and teamInvites to the onboarding store with actions.
- Creation: new useCreateTeam hook; redirects to Stripe if checkout URL is returned, or to Getting Started on success.
- Routing/Auth: protected team pages (details, brand, invite) and updates plan selection to route to /onboarding/teams.
<!-- End of auto-generated description by cubic. -->
* feat: redirect to new onboarding flow
* Getting started
* Brand details
* Preview organization brands
* Orgs team pages
* Invite team steps
* Move to global zustand store
* Few darkmdoe fixes
* Wip onboarding + stripe flow
* Default plan state
Server Action for gettting slug satus of org
* Remove onboardingId
* Confirmation prompt
* Update old onboarding flow handlers to handle new fields
* update onboarding hook
* Filter out organization section for none -company emails
* Match placeholders to users domain
* Drop migration
* Wip new onboarding intent
* WIP flow for self-hosted. Same service call just split logic
* WIP
* Add TODO
* Use onboarding user type instead of trpc session
* WIP
* WIP
* pass role and team name from onboarding to save in schema
* Add test to ensure role + name + team are persisted into onboarding table
* migrate roles to enum values
* Update ENUM
* Fix type error
* Redirect if flag is disabled
* Revert packages
* Revert all packages/* changes to original branch point
* Layout fixes + design
* Add slugify
* Support saving brand,logo and banner
* Cleanup
* iMobile fixes
* More mobile and darkmdoe fixes
* Add I18n
* Fix lock file
* Fix types
* Fix types errors
* Copy changes
