'use client' import { useState } from 'react' import Link from 'next/link' import { Github, Twitter, Eye, EyeOff, Facebook, ArrowRight, Check, Building2, Briefcase, MapPin } from 'lucide-react' // Modern Signup (Simple) export function ModernSignup() { const [showPassword, setShowPassword] = useState(false) const [agreed, setAgreed] = useState(false) return (

{/* Header */}

Create your account

Enter your details to get started

{/* Form */}

e.preventDefault()}>

First name

Last name

Email address

Password

Confirm password

setAgreed(e.target.checked)} className="h-4 w-4 rounded border-gray-300" /> I agree to the{" "} Terms {" "} and{" "} Privacy Policy

Or continue with

Already have an account?{" "} Sign in

) } // Long Form Multistep Signup export function LongFormSignup() { const [step, setStep] = useState(1) const [formData, setFormData] = useState({ // Personal Information firstName: '', lastName: '', email: '', password: '', phone: '', // Professional Details company: '', role: '', department: '', experience: '', // Additional Information address: '', city: '', country: '', interests: [] as string[], bio: '' }) const updateFormData = (e: React.ChangeEvent) => { setFormData(prev => ({ ...prev, [e.target.name]: e.target.value })) } const steps = [ { title: "Personal Information", description: "Start with your basic details", icon: }, { title: "Professional Details", description: "Tell us about your work", icon: }, { title: "Additional Info", description: "Help us know you better", icon: } ] return (

{/* Form Content */}

{/* Step Content */}

{/* Step Icon */}

{steps[step - 1].icon}

{/* Step Title */}

{steps[step - 1].title}

{steps[step - 1].description}

{/* Step Forms */}

e.preventDefault()} className="space-y-6"> {step === 1 && ( <>

First name

Last name

Email address

Password

Phone number

)} {step === 2 && ( <>

Company name

Job title

Department

Years of experience

)} {step === 3 && ( <>

Address

City

Country

Bio

</div>
                  </>
                )}

{/* Navigation */}
                <div className="flex justify-between pt-6">
                  <button
                    type="button"
                    onClick={() => setStep(Math.max(1, step - 1))}
                    className={`${
                      step === 1 ? 'invisible' : ''
                    } inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black`}
                  >
                    Previous
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      if (step < 3) {
                        setStep(step + 1)
                      }
                    }}
                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-black hover:bg-black/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
                  >
                    {step === 3 ? 'Complete' : 'Continue'}
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function SignupPage() {
  return (
    <div className="space-y-24">
      <ModernSignup />
      <LongFormSignup />
    </div>
  )
}

</article></body></html>

Signup components