"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { User, Mail, ArrowRight, ArrowLeft, Sparkles, CheckCircle2, Terminal, Palette, Globe, Rocket, Shield } from "lucide-react"; const preferences = [ { id: "dev", label: "Developer", icon: Terminal, color: "text-cyan-500", bg: "bg-cyan-500/10" }, { id: "design", label: "Designer", icon: Palette, color: "text-rose-500", bg: "bg-rose-500/10" }, { id: "marketing", label: "Marketing", icon: Globe, color: "text-emerald-500", bg: "bg-emerald-500/10" }, { id: "owner", label: "Founder", icon: Rocket, color: "text-amber-500", bg: "bg-amber-500/10" }, ]; export default function MultiStepInteractiveSignup() { const [[step, direction], setStep] = useState([0, 0]); const [selectedPref, setSelectedPref] = useState(null); const paginate = (newDirection: number) => { setStep([step + newDirection, newDirection]); }; return (

Step {step + 1}

Security Clearance

{[0, 1].map((i) => (

))}

{step === 0 ? ( 0 ? 50 : -50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: direction < 0 ? 50 : -50, opacity: 0 }} transition={{ duration: 0.4, ease: "circOut" }} className="space-y-8" >

Identity Portal.

Enter your digital credentials to synchronize your account with the global node network.

) : ( 0 ? 50 : -50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: direction < 0 ? 50 : -50, opacity: 0 }} transition={{ duration: 0.4, ease: "circOut" }} className="space-y-8" >

Domain Focus.

Select your specialization to optimize your workflow modules and interface.

{preferences.map((pref) => ( ))}

)}

Existing operator? Request Access

); }