<!-- This is an auto-generated description by cubic. -->
## Summary by cubic
Revamps onboarding with subtle route transitions, new org/teams illustrations, and clearer invite flows with real-time previews. Adds “Skip for now” on invites and guardrails to avoid incomplete team creation.
- **New Features**
- Added email invite pages for organizations and teams with shared EmailInviteForm and RoleSelector.
- Built a live invite browser preview that renders a 3×3 grid and updates as you type; works for orgs and teams.
- Applied route-keyed framer-motion transitions to layout, cards, and browser views for smoother page changes.
- Continuation prompt now detects saved org or team and routes to the right next step; localized copy.
- Added loading state to plan selection to prevent double navigation.
- Refreshed Organizations welcome modal with a new animated ring illustration and better scrolling.
- Added “Skip for now” to org and team invite-by-email steps to proceed without invites.
- Calendar browser preview now focuses on a time window around “now” for a more realistic demo.
- Added an optional floating footer to keep actions visible on long, scrollable lists.
- **Refactors and Fixes**
- Unified invite browser and replaced the org preview on the org email step.
- Split and simplified legacy invite views; team and org routes are cleaner and easier to extend.
- Streamlined the team invite step by removing a redundant action; non-admins are redirected to the email invite page.
- Prevented creating teams with empty details by redirecting back to team details.
- Minor UI cleanup: tighter borders, padding, and mobile max-heights across onboarding screens.
- Hide team select on org invites when no teams exist.
<sup>Written for commit ae7f5277ab998560ae6e2f3f9144852a7b4959a7. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
## What does this PR do?
- Redesigns the organization onboarding flow by merging the brand and details pages
- Improves the organization details page with a scrollable interface and visual previews
- Adds a new organization-specific browser preview component
## Visual Demo (For contributors especially)
#### Image Demo:
- The PR replaces the separate brand page with an integrated details page that includes logo and banner uploads
- The new organization browser view shows a preview of the organization profile with the selected branding
## Mandatory Tasks (DO NOT REMOVE)
- [ ] I have self-reviewed the code.
- [ ] 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.
- [ ] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
- Go through the organization onboarding flow
- Test uploading logos and banners
- Verify that the organization browser preview updates in real-time with the form inputs
- Confirm that the form validation works correctly for organization name and slug
- Check that the scrollable interface works properly with fade effects at top and bottom
## 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
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Split organization brand from the details step and added live previews for organizations and teams. Revamped org/team invites with reusable components, a dedicated email-invite page, and a CSV upload modal.
- **New Features**
- Separate Brand step with logo, banner, and color; instant org preview via OnboardingOrganizationBrowserView.
- Teams browser preview added; invites include email substep (/onboarding/organization/invite/email, /onboarding/teams/invite/email), CSV upload (template + parsing), and Google Workspace (behind flag).
- Shared components (EmailInviteForm, InviteOptions, RoleSelector) used across org and team invites.
- **Refactors**
- Updated org flow: Details → Brand → Teams → Invites; OnboardingLayout now supports dynamic step counts (org=4, team=3, personal=2).
- UI polish (OnboardingCard header padding) and org-specific previews now replace generic views across details/brand/invites/teams; ensured org welcome modal takes precedence over personal.
<sup>Written for commit d9b55c0b5505aa0d4ca1c4298a513bcd90606915. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
## What does this PR do?
<!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
- Fixes #XXXX (GitHub issue number)
- Fixes CAL-XXXX (Linear issue number - should be visible at the bottom of the GitHub issue description)
## Visual Demo (For contributors especially)
A visual demonstration is strongly recommended, for both the original and new change **(video / image - any one)**.
#### Video Demo (if applicable):
- Show screen recordings of the issue or feature.
- Demonstrate how to reproduce the issue, the behavior before and after the change.
#### Image Demo (if applicable):
- Add side-by-side screenshots of the original and updated change.
- Highlight any significant change(s).
## Mandatory Tasks (DO NOT REMOVE)
- [ ] I have self-reviewed the code (A decent size PR without self-review might be rejected).
- [ ] I have updated the developer docs in /docs if this PR makes changes that would require a [documentation change](https://cal.com/docs). If N/A, write N/A here and check the checkbox.
- [ ] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
<!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. Write details that help to start the tests -->
- Are there environment variables that should be set?
- What are the minimal test data to have?
- What is expected (happy path) to have (input and output)?
- Any other important info that could help to test that PR
## Checklist
<!-- Remove bullet points below that don't apply to you -->
- I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code doesn't follow the style guidelines of this project
- I haven't commented my code, particularly in hard-to-understand areas
- I haven't checked if my changes generate no new warnings
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Polished the onboarding experience with a live calendar preview, a team bio field, and improved username handling. Updated i18n strings and added responsive breakpoints for large screens.
- **New Features**
- Added right-column previews: OnboardingBrowserView in org teams and a live weekly OnboardingCalendarBrowserView for personal calendar setup.
- Introduced team bio in onboarding store and UI.
- Expanded i18n: team bio, browser view labels, and CSV invite flow.
- Added Tailwind screens for 3xl and 4xl to improve large-display layouts.
- **Bug Fixes**
- Normalized usernames with slugify on default and change to prevent invalid slugs.
- Unified disabled/readonly handling for premium vs. standard username fields; respects external disabled prop and org membership.
<sup>Written for commit 7804fad66ee516b25e22fc0d9239f3d29249189a. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
## 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
