feat: onboarding wizard #3

[comatory]

Summary by CodeRabbit

• New Features
  • Added a step progress indicator throughout the onboarding flow
  • Users can now select Slack and Email notification preferences during initial setup
  • Introduced an animated visualization of system architecture and traffic flow

Checklist

• I have discussed my proposed changes in an issue and have received approval to proceed.
• I have followed the coding standards of the project.
• Tests or benchmarks have been added or updated.
• Documentation has been updated on https://github.com/wundergraph/docs-website.
• I have read the Contributors Guide.

Open Source AI Manifesto

This project follows the principles of the Open Source AI Manifesto. Please ensure your contribution aligns with its principles.

PR (3) UI for onboarding wizard + step 1 (welcome) implementation

Parent: #2720

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3a057f4f-080f-43b9-8a50-50e12a221315

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

This PR implements a structured multi-step onboarding flow with step-based navigation, introducing new layout and navigation components (OnboardingLayout, OnboardingContainer, OnboardingNavigation), a progress indicator (Stepper), step-specific forms with validation, an animated network diagram, and enhanced state management to track user preferences.

Changes

Cohort / File(s)	Summary
Layout and Page Routing studio/src/components/layout/onboarding-layout.tsx, studio/src/pages/onboarding/[step].tsx	OnboardingLayout updated to accept optional title prop and include Logo, title heading, and Stepper component; replaced simple centered container with card-based layout. Page routing now parses step number, extracts dynamic title from ONBOARDING_STEPS, and passes layout directly to step components instead of via getLayout hook.
Navigation and UI Components studio/src/components/onboarding/onboarding-container.tsx, studio/src/components/onboarding/onboarding-navigation.tsx, studio/src/components/onboarding/stepper.tsx	New OnboardingContainer wraps children in flex column with centered alignment. New OnboardingNavigation provides unified Skip/Back/Next controls supporting both href-based and onClick-based forward actions with loading/disabled states and info tooltip. New Stepper displays step progress with visual markers, completion indicators, and navigation to completed steps.
State Management and Type Definitions studio/src/components/onboarding/onboarding-provider.tsx, studio/src/components/onboarding/onboarding-steps.ts	Onboarding type extends with slack and email boolean fields. New StepperStep interface and ONBOARDING_STEPS constant array define three labeled onboarding steps.
Step Components studio/src/components/onboarding/step-1.tsx, studio/src/components/onboarding/step-2.tsx, studio/src/components/onboarding/step-3.tsx	Step 1 refactored to collect Slack/Email preferences via Zod-validated form with checkboxes, persisting selections to store. Steps 2 and 3 simplified to delegate navigation UI to OnboardingNavigation and wrap content in OnboardingContainer; form validation and navigation logic consolidated.
Animation Component studio/src/components/onboarding/traffic-animation.tsx	New complex TrafficAnimation component renders animated SVG network diagram with node entry animations, connecting edges with opacity transitions, and glowing packet traffic moving between endpoints with coordinated timings.
Hooks and Configuration studio/src/hooks/use-onboarding-navigation.ts, studio/tailwind.config.js	useOnboardingNavigation hook extended to persist slack and email fields from query response. Tailwind config adds custom 160 spacing utility (40rem) enabling new margin/padding scale values.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: onboarding wizard #3' directly matches the PR's objective to implement the third part of the onboarding wizard UI and step 1 functionality, clearly summarizing the main change.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 0.21277% with 469 lines in your changes missing coverage. Please review.
✅ Project coverage is 1.56%. Comparing base (c98818e) to head (4cfeb58).
⚠️ Report is 1 commits behind head on ondrej/eng-9192-onboarding-wizard-from-signup-to-live-metrics-topic.

Files with missing lines	Patch %	Lines
...io/src/components/onboarding/traffic-animation.tsx	0.00%	188 Missing and 1 partial ⚠️
studio/src/components/onboarding/step-1.tsx	0.00%	100 Missing ⚠️
...rc/components/onboarding/onboarding-navigation.tsx	0.00%	53 Missing and 1 partial ⚠️
studio/src/components/onboarding/stepper.tsx	0.00%	48 Missing and 1 partial ⚠️
studio/src/pages/onboarding/[step].tsx	0.00%	34 Missing ⚠️
studio/src/components/layout/onboarding-layout.tsx	0.00%	13 Missing and 1 partial ⚠️
studio/src/components/onboarding/step-3.tsx	0.00%	13 Missing ⚠️
...udio/src/components/onboarding/onboarding-steps.ts	16.66%	5 Missing ⚠️
...src/components/onboarding/onboarding-container.tsx	0.00%	2 Missing and 1 partial ⚠️
studio/src/components/onboarding/step-2.tsx	0.00%	3 Missing ⚠️
... and 2 more

❗ There is a different number of reports uploaded between BASE (c98818e) and HEAD (4cfeb58). Click for more details.

HEAD has 19 uploads less than BASE

Flag	BASE (c98818e)	HEAD (4cfeb58)
	20	1

Additional details and impacted files

@@                                           Coverage Diff                                           @@
##           ondrej/eng-9192-onboarding-wizard-from-signup-to-live-metrics-topic   #2732       +/-   ##
=======================================================================================================
- Coverage                                                                41.63%   1.56%   -40.08%     
=======================================================================================================
  Files                                                                     1005     311      -694     
  Lines                                                                   131568   42346    -89222     
  Branches                                                                  5716     447     -5269     
=======================================================================================================
- Hits                                                                     54784     663    -54121     
+ Misses                                                                   75048   41383    -33665     
+ Partials                                                                  1736     300     -1436     

Files with missing lines	Coverage Δ
.../src/components/onboarding/onboarding-provider.tsx	0.00% <ø> (ø)
studio/src/hooks/use-onboarding-navigation.ts	0.00% <0.00%> (ø)
...src/components/onboarding/onboarding-container.tsx	0.00% <0.00%> (ø)
studio/src/components/onboarding/step-2.tsx	0.00% <0.00%> (ø)
studio/tailwind.config.js	0.00% <0.00%> (ø)
...udio/src/components/onboarding/onboarding-steps.ts	16.66% <16.66%> (ø)
studio/src/components/onboarding/step-3.tsx	0.00% <0.00%> (ø)
studio/src/components/layout/onboarding-layout.tsx	0.00% <0.00%> (ø)
studio/src/pages/onboarding/[step].tsx	0.00% <0.00%> (ø)
studio/src/components/onboarding/stepper.tsx	0.00% <0.00%> (ø)
... and 3 more

... and 699 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[comatory]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (8)

studio/src/components/onboarding/traffic-animation.tsx (2)

180-192: Consider using an interface for props.

Same as Edge, this component uses an inline type annotation instead of an interface.

♻️ Suggested refactor

+interface ResolvePulseProps {
+  cx: number;
+  cy: number;
+  delay: number;
+}
+
-function ResolvePulse({ cx, cy, delay }: { cx: number; cy: number; delay: number }) {
+function ResolvePulse({ cx, cy, delay }: ResolvePulseProps) {

As per coding guidelines: "Prefer interfaces over type aliases for object shapes in TypeScript".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/components/onboarding/traffic-animation.tsx` around lines 180 -
192, The ResolvePulse component uses an inline type annotation for its props;
define a named interface (e.g., ResolvePulseProps) describing cx: number, cy:
number, delay: number and replace the inline annotation in the ResolvePulse
signature with that interface; update any related references if necessary so the
function becomes ResolvePulse(props: ResolvePulseProps) or function
ResolvePulse({ cx, cy, delay }: ResolvePulseProps) to comply with the project's
guideline to prefer interfaces for object shapes.

---

120-146: Consider using an interface for props.

Per coding guidelines, interfaces are preferred over inline type annotations for object shapes. While this is a simple single-prop case, consistency helps with maintainability.

♻️ Suggested refactor

+interface EdgeProps {
+  d: string;
+}
+
-function Edge({ d }: { d: string }) {
+function Edge({ d }: EdgeProps) {

As per coding guidelines: "Prefer interfaces over type aliases for object shapes in TypeScript".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/components/onboarding/traffic-animation.tsx` around lines 120 -
146, Convert the inline prop type for the Edge component into a named interface:
create an interface EdgeProps { d: string } and update the function signature to
function Edge(props: EdgeProps) or function Edge({ d }: EdgeProps). Replace the
current inline annotation ({ d }: { d: string }) with the new interface
reference so the component uses EdgeProps for its props and stays consistent
with project TypeScript style.

studio/src/components/onboarding/onboarding-provider.tsx (1)

14-19: Prefer an interface for the Onboarding object shape.

♻️ Suggested refactor

-type Onboarding = {
+interface Onboarding {
   finishedAt?: Date;
   federatedGraphsCount: number;
   slack: boolean;
   email: boolean;
-};
+}

As per coding guidelines: **/*.{ts,tsx} should prefer interfaces over type aliases for object shapes.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/components/onboarding/onboarding-provider.tsx` around lines 14 -
19, Replace the type alias Onboarding with an interface declaration to comply
with the code style: change the declaration "type Onboarding = { finishedAt?:
Date; federatedGraphsCount: number; slack: boolean; email: boolean; }" to an
equivalent "interface Onboarding { finishedAt?: Date; federatedGraphsCount:
number; slack: boolean; email: boolean; }" and update any imports/exports or
references if needed (e.g., ensure React props or function signatures that
reference Onboarding continue to resolve to the new interface).

studio/src/components/onboarding/stepper.tsx (1)

7-15: Prefer a props interface and explicit return type for Stepper.

♻️ Suggested refactor

+interface StepperProps {
+  steps: StepperStep[];
+  currentStep: number;
+  className?: string;
+}
+
-export function Stepper({
+export function Stepper({
   steps,
   currentStep,
   className,
-}: {
-  steps: StepperStep[];
-  currentStep: number;
-  className?: string;
-}) {
+}: StepperProps): React.ReactElement {

As per coding guidelines: **/*.{ts,tsx} should prefer interfaces for object shapes and explicit function return types.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/components/onboarding/stepper.tsx` around lines 7 - 15, The
Stepper function should use a named props interface and an explicit return type:
create an exported interface (e.g., StepperProps) describing steps:
StepperStep[]; currentStep: number; className?: string, then change the
component signature to accept props: StepperProps and annotate the function with
an explicit return type (e.g., : JSX.Element). Update any internal references to
the parameter destructuring (steps, currentStep, className) to match the new
typed props shape and ensure imports/types for StepperStep and JSX are
available.

studio/src/components/onboarding/onboarding-navigation.tsx (1)

6-16: Extract props to an interface and add an explicit return type.

♻️ Suggested refactor

+interface OnboardingNavigationProps {
+  backHref?: string;
+  forward: { href: string } | { onClick: () => void; isLoading?: boolean; disabled?: boolean };
+  forwardLabel?: string;
+  onSkip: () => void;
+}
+
 export const OnboardingNavigation = ({
   backHref,
   forward,
   forwardLabel = 'Next',
   onSkip,
-}: {
-  backHref?: string;
-  forward: { href: string } | { onClick: () => void; isLoading?: boolean; disabled?: boolean };
-  forwardLabel?: string;
-  onSkip: () => void;
-}) => {
+}: OnboardingNavigationProps): React.ReactElement => {

As per coding guidelines: **/*.{ts,tsx} should prefer interfaces for object shapes and explicit function return types.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/components/onboarding/onboarding-navigation.tsx` around lines 6 -
16, Extract the component props into a named interface (e.g.,
OnboardingNavigationProps) that declares backHref?: string; forward: { href:
string } | { onClick: () => void; isLoading?: boolean; disabled?: boolean };
forwardLabel?: string; onSkip: () => void; and update the OnboardingNavigation
signature to accept (props: OnboardingNavigationProps) and add an explicit
return type of JSX.Element for the function; keep existing prop names (backHref,
forward, forwardLabel, onSkip) and export the interface if other modules may
reuse it.

studio/src/components/onboarding/onboarding-container.tsx (1)

1-3: Use a typed props interface and explicit component return type.

This is readable, but it currently uses an inline object shape and inferred return type.

♻️ Suggested refactor

+interface OnboardingContainerProps {
+  children: React.ReactNode;
+}
+
-export const OnboardingContainer = ({ children }: { children: React.ReactNode }) => {
+export const OnboardingContainer = ({ children }: OnboardingContainerProps): React.ReactElement => {
   return <div className="flex flex-1 flex-col items-center gap-4 text-center">{children}</div>;
 };

As per coding guidelines: **/*.{ts,tsx} should prefer interfaces for object shapes and explicit function return types.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/components/onboarding/onboarding-container.tsx` around lines 1 -
3, Change the inline props shape to a named interface (e.g.,
OnboardingContainerProps) and annotate the component with an explicit return
type (e.g., React.ReactElement or JSX.Element) so the signature reads something
like: declare interface OnboardingContainerProps { children: React.ReactNode }
and update the OnboardingContainer function to accept OnboardingContainerProps
and return the explicit type; keep the implementation body the same and only
change the prop type and return type declarations.

studio/src/pages/onboarding/[step].tsx (1)

39-39: Add explicit type annotations to getLayout.

Please annotate the page parameter and return type explicitly to match the repo TypeScript rule.

💡 Suggested fix

-OnboardingStep.getLayout = (page) => page;
+OnboardingStep.getLayout = (page: JSX.Element): JSX.Element => page;

As per coding guidelines: `**/*.{ts,tsx}`: "Use explicit type annotations for function parameters and return types in TypeScript".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/pages/onboarding/`[step].tsx at line 39, Add explicit TypeScript
annotations for the getLayout function assigned to OnboardingStep: annotate the
page parameter type (e.g., ReactElement or NextPage) and the function return
type (e.g., ReactNode or ReactElement) so the signature is fully typed; update
the OnboardingStep.getLayout assignment to include these parameter and return
types while keeping the same implementation (OnboardingStep.getLayout = (page)
=> page), referencing the OnboardingStep.getLayout symbol and the page parameter
in your change.

studio/src/components/layout/onboarding-layout.tsx (1)

7-7: Use a props interface and explicit return type for OnboardingLayout.

This keeps the component aligned with the repo TypeScript conventions.

💡 Suggested fix

-export const OnboardingLayout = ({ children, title }: { children?: React.ReactNode; title?: string }) => {
+interface OnboardingLayoutProps {
+  children?: React.ReactNode;
+  title?: string;
+}
+
+export const OnboardingLayout = ({ children, title }: OnboardingLayoutProps): JSX.Element => {

As per coding guidelines: `**/*.{ts,tsx}`: "Prefer interfaces over type aliases for object shapes in TypeScript" and "Use explicit type annotations for function parameters and return types in TypeScript".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@studio/src/components/layout/onboarding-layout.tsx` at line 7, Replace the
inline prop type with a dedicated interface (e.g., interface
OnboardingLayoutProps { children?: React.ReactNode; title?: string }) and update
the component signature to use that interface and an explicit return type (for
example: export const OnboardingLayout = ({ children, title }:
OnboardingLayoutProps): React.ReactElement | null => { ... }). Ensure the
function parameter uses the new OnboardingLayoutProps and the return type is
explicitly annotated.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@studio/src/components/onboarding/onboarding-navigation.tsx`:
- Around line 24-27: The InfoCircledIcon used as the child of TooltipTrigger is
not keyboard-focusable; wrap the icon in a semantic, focusable button element
inside TooltipTrigger (keep asChild) and add a clear aria-label (e.g.,
"Onboarding help" or "Open onboarding tooltip") so keyboard users can open the
tooltip; preserve the existing InfoCircledIcon className and visual styles and
ensure the button is visually minimal (transparent background, no border) and
forwards focus to the icon, updating the JSX around TooltipTrigger,
InfoCircledIcon, and TooltipContent accordingly.

In `@studio/src/components/onboarding/step-1.tsx`:
- Around line 59-64: The onSuccess handler currently calls form.getValues()
which can differ from the actual payload sent if the user toggles inputs while
the request is in flight; capture the submitted channel values before calling
mutate (e.g., const submittedChannels = form.getValues().channels) and then use
that captured submittedChannels in onSuccess when calling setOnboarding (instead
of calling form.getValues() there). Do the same replacement for the second
occurrence (the other onSuccess block that sets slack/email) so both use the
saved submitted payload rather than live form.getValues().

In `@studio/src/components/onboarding/stepper.tsx`:
- Line 27: The list item key currently uses the mutable content field step.label
which can change; update the JSX in the step rendering (the div with
key={step.label}) to use the stable identifier step.number instead (e.g.,
key={step.number} or key={String(step.number)}) so React reconciliation relies
on the intended stable id.

In `@studio/src/pages/onboarding/`[step].tsx:
- Around line 11-16: Normalize and guard router.query.step before using it:
ensure router.query.step is parsed to a bounded integer (e.g., fallback to 1 or
null on invalid/NaN) and clamp it within ONBOARDING_STEPS length so stepNumber
is never NaN or out of range; compute title from ONBOARDING_STEPS only when
stepNumber is a valid index and update the switch/case logic (refer to
router.query.step, stepNumber, ONBOARDING_STEPS, title, and the switch block) to
handle invalid or missing steps by routing to a safe default or showing a
fallback UI instead of relying on case 0/1 or default: null.

---

Nitpick comments:
In `@studio/src/components/layout/onboarding-layout.tsx`:
- Line 7: Replace the inline prop type with a dedicated interface (e.g.,
interface OnboardingLayoutProps { children?: React.ReactNode; title?: string })
and update the component signature to use that interface and an explicit return
type (for example: export const OnboardingLayout = ({ children, title }:
OnboardingLayoutProps): React.ReactElement | null => { ... }). Ensure the
function parameter uses the new OnboardingLayoutProps and the return type is
explicitly annotated.

In `@studio/src/components/onboarding/onboarding-container.tsx`:
- Around line 1-3: Change the inline props shape to a named interface (e.g.,
OnboardingContainerProps) and annotate the component with an explicit return
type (e.g., React.ReactElement or JSX.Element) so the signature reads something
like: declare interface OnboardingContainerProps { children: React.ReactNode }
and update the OnboardingContainer function to accept OnboardingContainerProps
and return the explicit type; keep the implementation body the same and only
change the prop type and return type declarations.

In `@studio/src/components/onboarding/onboarding-navigation.tsx`:
- Around line 6-16: Extract the component props into a named interface (e.g.,
OnboardingNavigationProps) that declares backHref?: string; forward: { href:
string } | { onClick: () => void; isLoading?: boolean; disabled?: boolean };
forwardLabel?: string; onSkip: () => void; and update the OnboardingNavigation
signature to accept (props: OnboardingNavigationProps) and add an explicit
return type of JSX.Element for the function; keep existing prop names (backHref,
forward, forwardLabel, onSkip) and export the interface if other modules may
reuse it.

In `@studio/src/components/onboarding/onboarding-provider.tsx`:
- Around line 14-19: Replace the type alias Onboarding with an interface
declaration to comply with the code style: change the declaration "type
Onboarding = { finishedAt?: Date; federatedGraphsCount: number; slack: boolean;
email: boolean; }" to an equivalent "interface Onboarding { finishedAt?: Date;
federatedGraphsCount: number; slack: boolean; email: boolean; }" and update any
imports/exports or references if needed (e.g., ensure React props or function
signatures that reference Onboarding continue to resolve to the new interface).

In `@studio/src/components/onboarding/stepper.tsx`:
- Around line 7-15: The Stepper function should use a named props interface and
an explicit return type: create an exported interface (e.g., StepperProps)
describing steps: StepperStep[]; currentStep: number; className?: string, then
change the component signature to accept props: StepperProps and annotate the
function with an explicit return type (e.g., : JSX.Element). Update any internal
references to the parameter destructuring (steps, currentStep, className) to
match the new typed props shape and ensure imports/types for StepperStep and JSX
are available.

In `@studio/src/components/onboarding/traffic-animation.tsx`:
- Around line 180-192: The ResolvePulse component uses an inline type annotation
for its props; define a named interface (e.g., ResolvePulseProps) describing cx:
number, cy: number, delay: number and replace the inline annotation in the
ResolvePulse signature with that interface; update any related references if
necessary so the function becomes ResolvePulse(props: ResolvePulseProps) or
function ResolvePulse({ cx, cy, delay }: ResolvePulseProps) to comply with the
project's guideline to prefer interfaces for object shapes.
- Around line 120-146: Convert the inline prop type for the Edge component into
a named interface: create an interface EdgeProps { d: string } and update the
function signature to function Edge(props: EdgeProps) or function Edge({ d }:
EdgeProps). Replace the current inline annotation ({ d }: { d: string }) with
the new interface reference so the component uses EdgeProps for its props and
stays consistent with project TypeScript style.

In `@studio/src/pages/onboarding/`[step].tsx:
- Line 39: Add explicit TypeScript annotations for the getLayout function
assigned to OnboardingStep: annotate the page parameter type (e.g., ReactElement
or NextPage) and the function return type (e.g., ReactNode or ReactElement) so
the signature is fully typed; update the OnboardingStep.getLayout assignment to
include these parameter and return types while keeping the same implementation
(OnboardingStep.getLayout = (page) => page), referencing the
OnboardingStep.getLayout symbol and the page parameter in your change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 62b243fa-c34f-404e-85f9-3a30e131d5a0

📥 Commits

Reviewing files that changed from the base of the PR and between c98818e and 087a6b2.

📒 Files selected for processing (13)

• studio/src/components/layout/onboarding-layout.tsx
• studio/src/components/onboarding/onboarding-container.tsx
• studio/src/components/onboarding/onboarding-navigation.tsx
• studio/src/components/onboarding/onboarding-provider.tsx
• studio/src/components/onboarding/onboarding-steps.ts
• studio/src/components/onboarding/step-1.tsx
• studio/src/components/onboarding/step-2.tsx
• studio/src/components/onboarding/step-3.tsx
• studio/src/components/onboarding/stepper.tsx
• studio/src/components/onboarding/traffic-animation.tsx
• studio/src/hooks/use-onboarding-navigation.ts
• studio/src/pages/onboarding/[step].tsx
• studio/tailwind.config.js

[wilsonrivera]

LGTM