## 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
* 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