I need to build an onboarding wizard in my exisrting dashboard. I'm attaching a screenshot of it so you can use the same design. Once people signup for my product they need to be sent to onboarding wizard. It will ask them fror their domain and "origin" as the first step. Then it will ask what CDN do you use and gives integration instractions in return. Once you finish with CDN integration on your end we will show you an indicator that we see that connection is set correctly. On the next step we will be showing you a report from tech SEO and CWV metrics we will be collecting from your pages and allow you select what fix to apply from existing options or you can write your own. This is it
I'll create an onboarding wizard that matches your RebelBoost dashboard design. The wizard will guide users through the 4-step process you described, maintaining the same dark theme and green accent colors.
I've created a comprehensive onboarding wizard that matches your RebelBoost dashboard design with the following features:
Key Features:
4-Step Process:
- Domain & Origin setup
- CDN provider selection with integration instructions
- Connection verification with loading states
- Performance report with fix recommendations
Design Consistency:
- Matches your dark theme with green accents
- Uses the same card-based layout
- Consistent typography and spacing
Interactive Elements:
- Progress indicator showing current step
- Dynamic CDN integration instructions based on provider
- Connection verification with loading animation
- Checkbox selection for recommended fixes
Smart Validation:
- Prevents progression without required fields
- Disables "Continue" until connection is verified
- Shows appropriate states for each step
CDN Integration:
- Supports major CDN providers (Cloudflare, Fastly, AWS, Azure)
- Provides specific configuration code snippets
- Copy-to-clipboard functionality
Performance Report:
- Shows key metrics (Performance Score, Issues, Load Time)
- Lists recommended fixes with impact levels
- Allows custom fix descriptions
The wizard is fully responsive and ready to integrate into your existing dashboard. You can customize the styling, add real API integrations, and modify the fix recommendations based on your actual analysis data.
I'll update the onboarding wizard to use a light theme and integrate the steps into a left sidebar menu, similar to your dashboard layout.
Perfect! I've updated the onboarding wizard with the following key changes:
Key Updates:
- Light Theme: Removed all dark theme classes and switched to a clean light theme
Left Sidebar Navigation:
- Steps are now displayed as a vertical menu in the left sidebar
- Each step shows completion status with checkmarks
- Progress bar at the top of the sidebar
- RebelBoost branding in the sidebar header
Improved Layout:
- Main content area with proper header showing current step
- Mobile-responsive with collapsible sidebar using Sheet component
- Clean card-based content layout
Enhanced UX:
- Users can click on completed steps to navigate back
- Visual indicators for current, completed, and locked steps
- Progress percentage display
- Mobile hamburger menu for smaller screens
Step Management:
- Tracks completed steps to allow navigation
- Prevents access to future steps until prerequisites are met
- Maintains all original functionality within the new layout
The wizard now has a professional dashboard feel that matches your RebelBoost interface, with the steps clearly organized in the left sidebar for easy navigation and progress tracking.