"use client"; import React, { useState } from "react"; import { FaUser, FaCogs, FaNetworkWired, FaCheckCircle, FaChevronRight, FaChevronLeft } from "react-icons/fa"; // Interface for onboarding steps interface OnboardingStep { icon: JSX.Element; title: string; description: string; inputs?: { placeholder: string; type: string }[]; bgColor: string; textColor: string; glowColor: string; } // Configurable onboarding steps const ONBOARDING_STEPS: OnboardingStep[] = [ { icon: , title: "Create Your Profile", description: "Enter your details to set up your account and personalize your experience.", inputs: [ { placeholder: "Username", type: "text" }, { placeholder: "Email", type: "email" }, { placeholder: "Password", type: "password" }, ], bgColor: "bg-cyan-900", textColor: "text-cyan-400", glowColor: "glow-cyan", }, { icon: , title: "Customize Settings", description: "Choose your preferred settings, themes, and interfaces.", inputs: [ { placeholder: "Dark Mode (On/Off)", type: "text" }, { placeholder: "Language Preferences", type: "text" }, ], bgColor: "bg-purple-900", textColor: "text-purple-400", glowColor: "glow-purple", }, { icon: , title: "Connect to the Network", description: "Link your account to our secure network and sync your data.", inputs: [ { placeholder: "Wi-Fi SSID", type: "text" }, { placeholder: "Network Password", type: "password" }, ], bgColor: "bg-yellow-900", textColor: "text-yellow-400", glowColor: "glow-yellow", }, { icon: , title: "Complete Setup", description: "You're all set! Start exploring and enjoy your journey.", bgColor: "bg-green-900", textColor: "text-green-400", glowColor: "glow-green", }, ]; const CyberpunkOnboarding = () => { const [currentStep, setCurrentStep] = useState(0); const [formData, setFormData] = useState<{ [key: string]: string }>({}); const handleInputChange = (e: React.ChangeEvent, placeholder: string) => { setFormData({ ...formData, [placeholder]: e.target.value }); }; const nextStep = () => { if (currentStep < ONBOARDING_STEPS.length - 1) { setCurrentStep(currentStep + 1); } }; const prevStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; const currentStepData = ONBOARDING_STEPS[currentStep]; return (

{/* Cyberpunk Grid Background */}

{/* Neon Lines with Animation */}

{currentStepData.icon}

{currentStepData.title}

{currentStepData.description}

{/* Render inputs if they exist */} {currentStepData.inputs && (

{currentStepData.inputs.map((input, index) => (

handleInputChange(e, input.placeholder)} className={`w-full border-2 ${currentStepData.textColor} bg-gray-800 px-4 py-2 font-bold ${currentStepData.textColor} transition-all duration-300 ease-in-out focus:outline-none focus:bg-${currentStepData.textColor.split('-')[1]}-900 focus:text-white placeholder-${currentStepData.textColor.split('-')[1]}-600 ${currentStepData.glowColor} transform hover:scale-105 hover:-translate-y-1 focus:scale-105 focus:-translate-y-1`} />

))}

)} {/* Navigation Buttons */}

{currentStep < ONBOARDING_STEPS.length - 1 ? ( ) : ( )}

); }; export default CyberpunkOnboarding;

Onboarding Components

Cyberpunk Onboarding