diff --git a/src/components/FinalStepForm.jsx b/src/components/FinalStepForm.jsx
new file mode 100644
index 0000000..65c4398
--- /dev/null
+++ b/src/components/FinalStepForm.jsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Button } from './ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
+import { Input } from './ui/input'
+import { Label } from './ui/label'
+import { Textarea } from './ui/textarea'
+import { Checkbox } from './ui/checkbox'
+import { CheckCircle, AlertCircle, ArrowRight, BookOpen } from 'lucide-react'
+
+function FinalStepForm({ formData, handleInputChange, handleSubmit, isSubmitting, submitStatus, formError }) {
+ return (
+
+
+
+
+ Additional Information & Terms
+
+ Almost there! Provide any additional details and agree to our terms.
+
+
+
+
+
+
+
+
+ )
+}
+
+export default FinalStepForm
\ No newline at end of file
diff --git a/src/components/InterestSpecificStep.jsx b/src/components/InterestSpecificStep.jsx
new file mode 100644
index 0000000..0c38a28
--- /dev/null
+++ b/src/components/InterestSpecificStep.jsx
@@ -0,0 +1,212 @@
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
+import { Input } from './ui/input'
+import { Label } from './ui/label'
+import { Textarea } from './ui/textarea'
+import { Checkbox } from './ui/checkbox'
+import { Target } from 'lucide-react'
+
+function InterestSpecificStep({ formData, handleInputChange }) {
+ const renderFormFields = () => {
+ const fields = []
+
+ if (formData.interestCategory.includes('realEstateDeveloper')) {
+ fields.push(
+
+ )
+ }
+
+ if (formData.interestCategory.includes('government')) {
+ fields.push(
+
+
Government/Public Sector Specifics
+
+
+ handleInputChange('jurisdiction', e.target.value)} />
+
+
+
+
+
+
+ handleInputChange('budgetParameters', e.target.value)} />
+
+
+
+
+
+ )
+ }
+
+ if (formData.interestCategory.includes('enterprise')) {
+ fields.push(
+
+
Enterprise Customer Specifics
+
+
+
+
+
+
+
+
+ handleInputChange('complianceSecurity', e.target.value)} />
+
+
+
+ handleInputChange('migrationTimeline', e.target.value)} />
+
+
+ )
+ }
+
+ if (formData.interestCategory.includes('telecom')) {
+ fields.push(
+
+
Telecom/ISP Specifics
+
+
+
+
+
+
+
+
+ handleInputChange('technicalIntegration', e.target.value)} />
+
+
+
+ handleInputChange('businessModelPreferences', e.target.value)} />
+
+
+ )
+ }
+
+ if (formData.interestCategory.includes('investor')) {
+ fields.push(
+
+
Investor/Partner Specifics
+
+
+
+
+
+
+
+
+
+ handleInputChange('commitmentLevel', e.target.value)} />
+
+
+
+ handleInputChange('partnershipStructure', e.target.value)} />
+
+
+ handleInputChange('accredited', checked)}
+ />
+
+
+
+ )
+ }
+
+ if (formData.interestCategory.includes('individual')) {
+ fields.push(
+
+
Individual/Community Specifics
+
+
+ handleInputChange('location', e.target.value)} />
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ return fields.length > 0 ? fields : null
+ }
+
+ return (
+
+
+
+
+ Specific Requirements for {formData.interestCategory.map(cat => cat.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())).join(', ')}
+
+ Provide details for your selected interest categories. All fields are optional.
+
+
+
+ {renderFormFields()}
+
+
+
+
+ )
+}
+
+export default InterestSpecificStep
\ No newline at end of file
diff --git a/src/components/RegisterPage.jsx b/src/components/RegisterPage.jsx
index d620495..927e8a3 100644
--- a/src/components/RegisterPage.jsx
+++ b/src/components/RegisterPage.jsx
@@ -7,14 +7,17 @@ import { Input } from './ui/input'
import { Label } from './ui/label'
import { Textarea } from './ui/textarea'
import { Checkbox } from './ui/checkbox'
-import { Building2, Globe, Briefcase, Users, Home, DollarSign, CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target, Shield, Network, BookOpen } from 'lucide-react'
+import { CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target, Shield, Network, BookOpen, Globe, Users } from 'lucide-react'
import Navigation from './Navigation'
+import Step1Form from './Step1Form'
+import InterestSpecificStep from './InterestSpecificStep'
+import FinalStepForm from './FinalStepForm'
function RegisterPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
- interestCategory: '',
+ interestCategory: [],
company: '',
position: '',
investmentRange: '',
@@ -49,24 +52,68 @@ function RegisterPage() {
communityInvolvementInterest: ''
})
+ const [currentStep, setCurrentStep] = useState(1)
const [isSubmitting, setIsSubmitting] = useState(false)
const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
+ const [formError, setFormError] = useState(null) // For step-specific validation messages
const handleInputChange = (field, value) => {
- setFormData(prev => ({
- ...prev,
- [field]: value
- }))
+ if (field === 'interestCategory') {
+ setFormData(prev => {
+ const currentCategories = prev.interestCategory
+ if (currentCategories.includes(value)) {
+ return {
+ ...prev,
+ interestCategory: currentCategories.filter(cat => cat !== value)
+ }
+ } else {
+ return {
+ ...prev,
+ interestCategory: [...currentCategories, value]
+ }
+ }
+ })
+ } else {
+ setFormData(prev => ({
+ ...prev,
+ [field]: value
+ }))
+ }
+ }
+
+ const handleNext = () => {
+ setFormError(null) // Clear previous errors
+
+ if (currentStep === 1) {
+ if (formData.interestCategory.length === 0) {
+ setFormError('Please select at least one interest category.')
+ return
+ }
+ if (!formData.name || !formData.email) {
+ setFormError('Please fill in your full name and email address.')
+ return
+ }
+ }
+ // Add more step-specific validation here if needed
+
+ setCurrentStep(prev => prev + 1)
+ }
+
+ const handlePrevious = () => {
+ setFormError(null) // Clear previous errors
+ setCurrentStep(prev => prev - 1)
}
const handleSubmit = async (e) => {
e.preventDefault()
setIsSubmitting(true)
setSubmitStatus(null)
+ setFormError(null)
- // Basic validation for terms
+ // Final validation before submission
if (!formData.terms) {
setSubmitStatus('error')
+ setFormError('You must agree to the Terms and Conditions and Privacy Policy.')
console.error('Terms not agreed.')
setIsSubmitting(false)
return
@@ -97,7 +144,7 @@ function RegisterPage() {
// Reset form after successful submission
setFormData({
- name: '', email: '', interestCategory: '', company: '', position: '',
+ name: '', email: '', interestCategory: [], company: '', position: '',
investmentRange: '', experience: '', motivation: '', accredited: false,
newsletter: false, terms: false, propertyType: '', propertySize: '',
location: '', connectivity: '', investmentTimeline: '', revenueExpectations: '',
@@ -116,166 +163,33 @@ function RegisterPage() {
}
}
- const renderFormFields = () => {
- switch (formData.interestCategory) {
- case 'realEstateDeveloper':
+ const renderStep = () => {
+ switch (currentStep) {
+ case 1:
return (
- <>
-
-
- handleInputChange('propertyType', e.target.value)} />
-
-
-
- handleInputChange('location', e.target.value)} />
-
-
-
- handleInputChange('investmentTimeline', e.target.value)} />
-
-
-
- handleInputChange('revenueExpectations', e.target.value)} />
-
- >
+
)
- case 'government':
+ case 2:
return (
- <>
-
-
- handleInputChange('jurisdiction', e.target.value)} />
-
-
-
-
-
-
- handleInputChange('budgetParameters', e.target.value)} />
-
-
-
-
- >
+
)
- case 'enterprise':
+ case 3:
return (
- <>
-
-
-
-
-
-
-
-
- handleInputChange('complianceSecurity', e.target.value)} />
-
-
-
- handleInputChange('migrationTimeline', e.target.value)} />
-
- >
- )
- case 'telecom':
- return (
- <>
-
-
-
-
-
-
-
-
- handleInputChange('technicalIntegration', e.target.value)} />
-
-
-
- handleInputChange('businessModelPreferences', e.target.value)} />
-
- >
- )
- case 'investor':
- return (
- <>
-
-
-
-
-
-
-
-
-
- handleInputChange('commitmentLevel', e.target.value)} />
-
-
-
- handleInputChange('partnershipStructure', e.target.value)} />
-
-
- handleInputChange('accredited', checked)}
- />
-
-
- >
- )
- case 'individual':
- return (
- <>
-
-
- handleInputChange('location', e.target.value)} />
-
-
-
-
-
-
-
-
-
-
-
- >
+
)
default:
return null
@@ -300,242 +214,37 @@ function RegisterPage() {
- {/* Choose Your Path */}
-
-
-
-
How Do You Want to Get Involved?
-
-
- handleInputChange('interestCategory', 'realEstateDeveloper')}
- >
-
-
- Real Estate Developer
-
-
- Transform your properties into digital utilities.
-
-
- handleInputChange('interestCategory', 'government')}
- >
-
-
- Government/Public Sector
-
-
- Build sovereign digital infrastructure.
-
-
- handleInputChange('interestCategory', 'enterprise')}
- >
-
-
- Enterprise Customer
-
-
- Deploy private, secure cloud infrastructure.
-
-
- handleInputChange('interestCategory', 'telecom')}
- >
-
-
- Telecom/ISP
-
-
- Extend your network with edge computing.
-
-
- handleInputChange('interestCategory', 'investor')}
- >
-
-
- Investor/Partner
-
-
- Join the ThreeFold ecosystem.
-
-
- handleInputChange('interestCategory', 'individual')}
- >
-
-
- Individual/Community
-
-
- Start with residential deployment.
-
-
-
-
-
-
- {/* Contact Form */}
-
+ {/* Wizard Steps */}
+
-
-
Tell Us About Your Interest
-
- Please fill out the form below. Fields will adapt based on your selection above.
-
+ {renderStep()}
+
+ {/* Navigation Buttons */}
+
+ {currentStep > 1 && (
+
+ )}
+ {currentStep < 3 && (
+
+ )}
+ {currentStep === 3 && (
+
+ )}
-
-
-
- Required Information
-
- Provide your contact details and a brief description of your requirements.
-
-
-
-
-
-
-
+
{/* What Happens Next */}
diff --git a/src/components/Step1Form.jsx b/src/components/Step1Form.jsx
new file mode 100644
index 0000000..0577eee
--- /dev/null
+++ b/src/components/Step1Form.jsx
@@ -0,0 +1,157 @@
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
+import { Input } from './ui/input'
+import { Label } from './ui/label'
+import { Building2, Globe, Briefcase, Users, Home, DollarSign, CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target, Shield, Network, BookOpen } from 'lucide-react'
+
+function Step1Form({ formData, handleInputChange, formError }) {
+ return (
+ <>
+ {/* How Do You Want to Get Involved? */}
+
+
+
+
How Do You Want to Get Involved?
+
+ {formError && (
+
+ )}
+
+ Please select one or more categories below that best describe your interest to reveal specific questions.
+
+
+ handleInputChange('interestCategory', 'realEstateDeveloper')}
+ >
+
+
+ Real Estate Developer
+
+
+ Transform your properties into digital utilities.
+
+
+ handleInputChange('interestCategory', 'government')}
+ >
+
+
+ Government/Public Sector
+
+
+ Build sovereign digital infrastructure.
+
+
+ handleInputChange('interestCategory', 'enterprise')}
+ >
+
+
+ Enterprise Customer
+
+
+ Deploy private, secure cloud infrastructure.
+
+
+ handleInputChange('interestCategory', 'telecom')}
+ >
+
+
+ Telecom/ISP
+
+
+ Extend your network with edge computing.
+
+
+ handleInputChange('interestCategory', 'investor')}
+ >
+
+
+ Investor/Partner
+
+
+ Join the ThreeFold ecosystem.
+
+
+ handleInputChange('interestCategory', 'individual')}
+ >
+
+
+ Individual/Community
+
+
+ Start with residential deployment.
+
+
+
+
+
+
+ {/* Contact Form - General Information */}
+
+
+
+
+ Your Contact Details
+
+ Provide your basic contact information.
+
+
+
+
+
+
+
+
+ handleInputChange('company', e.target.value)}
+ />
+
+
+
+
+
+
+ >
+ )
+}
+
+export default Step1Form
\ No newline at end of file