import React, { useState, useEffect } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; // --- SVG Icon Components --- const CheckCircleIcon = ({ className = "w-6 h-6" }) => ( ); const ArrowRightIcon = ({ className = "w-5 h-5" }) => ( ); const ArrowLeftIcon = ({ className = "w-5 h-5" }) => ( ); const UserIcon = ({ className = "w-6 h-6" }) => ( ); const BuildingOfficeIcon = ({ className = "w-6 h-6" }) => ( ); const PuzzlePieceIcon = ({ className = "w-6 h-6" }) => ( ); const FlagIcon = ({ className = "w-6 h-6" }) => ( ); // Main Onboarding Wizard Component export default function OnboardingWizard() { const [currentStep, setCurrentStep] = useState(0); const [formData, setFormData] = useState({ // Personal info firstName: "", lastName: "", email: "", // Company info companyName: "", role: "", teamSize: "", // Preferences preferences: [], // Completed completed: false }); const [errors, setErrors] = useState({}); const [animationDirection, setAnimationDirection] = useState("forward"); // Step configuration const steps = [ { id: "personal", title: "Personal Information", icon: UserIcon, description: "Tell us about yourself" }, { id: "company", title: "Company Details", icon: BuildingOfficeIcon, description: "Your work information" }, { id: "preferences", icon: PuzzlePieceIcon, title: "Preferences", description: "Customize your experience" }, { id: "completed", icon: FlagIcon, title: "All Set!", description: "You're ready to go" } ]; // Handle form input changes const handleChange = (e) => { const { name, value, type, checked } = e.target; if (type === "checkbox") { setFormData(prev => { const updatedPreferences = checked ? [...prev.preferences, value] : prev.preferences.filter(item => item !== value); return { ...prev, preferences: updatedPreferences }; }); } else { setFormData(prev => ({ ...prev, [name]: value })); } // Clear error for this field when user types if (errors[name]) { setErrors(prev => ({ ...prev, [name]: "" })); } }; // Navigate to next step const handleNext = () => { const currentStepId = steps[currentStep].id; const newErrors = {}; // Validate current step if (currentStepId === "personal") { if (!formData.firstName.trim()) newErrors.firstName = "First name is required"; if (!formData.lastName.trim()) newErrors.lastName = "Last name is required"; if (!formData.email.trim()) { newErrors.email = "Email is required"; } else if (!/\S+@\S+\.\S+/.test(formData.email)) { newErrors.email = "Email is invalid"; } } else if (currentStepId === "company") { if (!formData.companyName.trim()) newErrors.companyName = "Company name is required"; if (!formData.role.trim()) newErrors.role = "Role is required"; if (!formData.teamSize) newErrors.teamSize = "Team size is required"; } else if (currentStepId === "preferences") { if (formData.preferences.length === 0) { newErrors.preferences = "Please select at least one preference"; } } if (Object.keys(newErrors).length > 0) { setErrors(newErrors); return; } // If validation passes, proceed to next step setAnimationDirection("forward"); if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1); } // Mark as completed if on last step if (currentStep === steps.length - 2) { setFormData(prev => ({ ...prev, completed: true })); } }; // Navigate to previous step const handlePrevious = () => { setAnimationDirection("backward"); if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; // Complete the onboarding process const handleComplete = () => { console.log("Onboarding completed with data:", formData); // Here you would typically submit the data to your backend alert("Onboarding completed! Check console for submitted data."); }; // Animation variants const pageVariants = { initial: (direction) => ({ x: direction === "forward" ? "100%" : "-100%", opacity: 0 }), in: { x: 0, opacity: 1 }, out: (direction) => ({ x: direction === "forward" ? "-100%" : "100%", opacity: 0 }) }; const pageTransition = { type: "tween", ease: "anticipate", duration: 0.5 }; return (

{/* Progress indicator */}

Get Started

Step {currentStep + 1} of {steps.length}

{steps.map((step, index) => (

{index < currentStep ? ( ) : ( )}

{step.title}

))}

{/* Form steps */}

{/* Step 1: Personal Information */} {currentStep === 0 && (

{steps[currentStep].title}

{steps[currentStep].description}

First name {errors.firstName && (

{errors.firstName}

)}

Last name {errors.lastName && (

{errors.lastName}

)}

Email address {errors.email && (

{errors.email}

)}

)} {/* Step 2: Company Details */} {currentStep === 1 && (

{steps[currentStep].title}

{steps[currentStep].description}

Company name {errors.companyName && (

{errors.companyName}

)}

Your role {errors.role && (

{errors.role}

)}

Team size {errors.teamSize && (

{errors.teamSize}

)}

)} {/* Step 3: Preferences */} {currentStep === 2 && (

{steps[currentStep].title}

{steps[currentStep].description}

What are you interested in?

{[ { id: 'analytics', label: 'Analytics & Reporting' }, { id: 'automation', label: 'Workflow Automation' }, { id: 'collaboration', label: 'Team Collaboration' }, { id: 'integration', label: 'Third-party Integrations' }, { id: 'security', label: 'Security & Compliance' } ].map((item) => (

{item.label}

))}

{errors.preferences && (

{errors.preferences}

)}

)} {/* Step 4: Completed */} {currentStep === 3 && (

You're all set!

Thank you for completing the onboarding process, {formData.firstName}. Your account has been created and is ready to use.

Account summary:

Name: {formData.firstName} {formData.lastName}
Email: {formData.email}
Company: {formData.companyName}
Role: {formData.role}
Team size: {formData.teamSize}

)} {/* Navigation buttons */}

{currentStep > 0 && currentStep < 3 && ( )} {currentStep < 3 ? ( ) : ( )}

); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Multi-step Wizard

Created by

Installation

How to use

Dependencies

Multi-step Wizard

Created by

Installation

How to use

Dependencies