"use client"; import { useState } from "react"; import { ChevronLeft, ChevronRight, Check, AlertTriangle, User, Briefcase, Globe, Factory } from "lucide-react"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { cn } from "@/lib/utils"; const steps = [ { id: 1, title: "Account Type", description: "Select your account type" }, { id: 2, title: "Account Info", description: "Setup your account settings" }, { id: 3, title: "Business Details", description: "Setup your business details" }, { id: 4, title: "Billing Details", description: "Provide your payment info" }, { id: 5, title: "Completed", description: "Your account is created" } ]; export default function OnboardingFlow() { const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState({ accountType: "corporate", teamSize: "10-50", teamName: "", accountPlan: "developer", companyName: "", industry: "", website: "", nameOnCard: "Max Doe", cardNumber: "4111 1111 1111 1111", expirationMonth: "", expirationYear: "", cvv: "", saveCard: true }); const handleNext = () => { if (currentStep < 5) { setCurrentStep(currentStep + 1); } }; const handlePrevious = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1); } }; const updateFormData = (field: string, value: string | boolean) => { setFormData((prev) => ({ ...prev, [field]: value })); }; const renderStepContent = () => { switch (currentStep) { case 1: return (

Choose Account Type If you need more info, please check out{" "} Help Page .

updateFormData("accountType", "personal")}>

Personal Account

If you need more info, please check it out

updateFormData("accountType", "corporate")}>

Corporate Account

Create corporate account to manage users

); case 2: return (

Account Info If you need more info, please check out{" "} Help Page .

Specify Team Size

{["1-1", "2-10", "10-50", "50+"].map((size) => ( ))}

Customers will see this shortened version of your statement descriptor

Team Account Name updateFormData("teamName", e.target.value)} className="mt-2" />

Select Account Plan updateFormData("accountPlan", value)} className="space-y-3">

Company Account

Use images to enhance your post flow

Developer Account

Use images to your post time

Testing Account

Use images to enhance time travel rivers

); case 3: return (

Business Details If you need more info, please check out{" "} Help Page .

Company Name updateFormData("companyName", e.target.value)} />

Industry

Website updateFormData("website", e.target.value)} />

); case 4: return (

Billing Details If you need more info, please check out{" "} Help Page .

Name On Card * updateFormData("nameOnCard", e.target.value)} className="mt-2" />

Card Number *

updateFormData("cardNumber", e.target.value)} className="pr-20" />

VISA

Expiration Date *

CVV * updateFormData("cvv", e.target.value)} placeholder="CVV" className="mt-2" />

Save Card for further billing?

If you need more info, please check budget planning

updateFormData("saveCard", checked)} /> Save Card

); case 5: return (

Your Are Done! If you need more info, please{" "} Sign In .

Writing headlines for blog posts is as much an art as it is a science and probably warrants its own post, but for all advise is with what works for your great & amazing audience.

We need your attention!
To start using great tools, please,{" "} Create Team Platform

); default: return null; } }; return (

{/* Step Indicator */}

{steps.map((step) => (

step.id ? "bg-purple-600 text-white" : currentStep === step.id ? "bg-purple-500 text-white" : "bg-gray-200 text-gray-600" )}> {currentStep > step.id ? : step.id}

= step.id ? "text-gray-800" : "text-gray-500" )}> {step.title}

{step.id < steps.length && (

step.id && "bg-purple-400" )} /> )}

))}

{renderStepContent()} {/* Navigation */}

{currentStep < 5 ? ( ) : null}

); }