From 5420e59ff96205f5905a0c16e79c2b1ef51f624a Mon Sep 17 00:00:00 2001
From: despiegk <kristof@incubaid.com>
Date: Thu, 24 Jul 2025 11:49:38 +0200
Subject: [PATCH] ...

---
 src/components/FinalStepForm.jsx        | 105 +++++
 src/components/InterestSpecificStep.jsx | 212 ++++++++++
 src/components/RegisterPage.jsx         | 501 +++++-------------------
 src/components/Step1Form.jsx            | 157 ++++++++
 4 files changed, 579 insertions(+), 396 deletions(-)
 create mode 100644 src/components/FinalStepForm.jsx
 create mode 100644 src/components/InterestSpecificStep.jsx
 create mode 100644 src/components/Step1Form.jsx

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 (
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+      <div className="max-w-4xl mx-auto">
+        <Card className="bg-white shadow-xl">
+          <CardHeader>
+            <CardTitle className="text-2xl text-center">Additional Information & Terms</CardTitle>
+            <CardDescription className="text-center text-lg">
+              Almost there! Provide any additional details and agree to our terms.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-8">
+              {submitStatus === 'success' && (
+                <div className="flex items-center gap-2 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800">
+                  <CheckCircle className="h-5 w-5" />
+                  <span>Thank you! Your interest has been registered successfully. We'll be in touch soon.</span>
+                </div>
+              )}
+
+              {submitStatus === 'error' && (
+                <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
+                  <AlertCircle className="h-5 w-5" />
+                  <span>{formError || 'There was an error registering your interest. Please ensure all required fields are filled and terms are agreed.'}</span>
+                </div>
+              )}
+
+              <div className="space-y-6">
+                <h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
+                  <BookOpen className="h-5 w-5 text-purple-600" />
+                  Additional Information (Optional)
+                </h3>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="briefDescription">Brief Description of Requirements</Label>
+                  <Textarea
+                    id="briefDescription"
+                    placeholder="Tell us more about your needs and how ThreeFold can help."
+                    value={formData.briefDescription}
+                    onChange={(e) => handleInputChange('briefDescription', e.target.value)}
+                    rows={4}
+                  />
+                </div>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="timeline">Timeline for Deployment</Label>
+                  <Input id="timeline" placeholder="e.g., Immediate, 3-6 months, 1 year+" value={formData.timeline} onChange={(e) => handleInputChange('timeline', e.target.value)} />
+                </div>
+                
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="newsletter"
+                    checked={formData.newsletter}
+                    onCheckedChange={(checked) => handleInputChange('newsletter', checked)}
+                  />
+                  <Label htmlFor="newsletter" className="text-sm">
+                    I'd like to receive updates about ThreeFold Galaxy's progress and opportunities
+                  </Label>
+                </div>
+              </div>
+
+              <div className="space-y-4 mt-8">
+                <div className="flex items-start space-x-2">
+                  <Checkbox
+                    id="terms"
+                    checked={formData.terms}
+                    onCheckedChange={(checked) => handleInputChange('terms', checked)}
+                    required
+                  />
+                  <Label htmlFor="terms" className="text-sm">
+                    I agree to the <Link to="/terms" className="text-blue-600 hover:underline">Terms and Conditions</Link> and <Link to="/privacy" className="text-blue-600 hover:underline">Privacy Policy</Link>. *
+                  </Label>
+                </div>
+              </div>
+
+              {/* Submit Button */}
+              <div className="pt-6">
+                <Button
+                  type="submit"
+                  disabled={isSubmitting || !formData.terms}
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-lg py-3"
+                >
+                  {isSubmitting ? 'Submitting...' : 'Register Your Interest'}
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  )
+}
+
+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(
+        <div key="realEstateDeveloperFields" className="space-y-6 border-t pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-slate-800">Real Estate Developer Specifics</h4>
+          <div className="space-y-2">
+            <Label htmlFor="propertyType">Property Type and Size</Label>
+            <Input id="propertyType" placeholder="e.g., Residential, Commercial, Industrial; 1000 sq ft" value={formData.propertyType} onChange={(e) => handleInputChange('propertyType', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="location">Location and Connectivity</Label>
+            <Input id="location" placeholder="City, Country; Fiber/Broadband availability" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="investmentTimeline">Investment Timeline</Label>
+            <Input id="investmentTimeline" placeholder="e.g., 3-6 months, 1 year+" value={formData.investmentTimeline} onChange={(e) => handleInputChange('investmentTimeline', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="revenueExpectations">Revenue Expectations</Label>
+            <Input id="revenueExpectations" placeholder="e.g., Passive income, property value increase" value={formData.revenueExpectations} onChange={(e) => handleInputChange('revenueExpectations', e.target.value)} />
+          </div>
+        </div>
+      )
+    }
+
+    if (formData.interestCategory.includes('government')) {
+      fields.push(
+        <div key="governmentFields" className="space-y-6 border-t pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-slate-800">Government/Public Sector Specifics</h4>
+          <div className="space-y-2">
+            <Label htmlFor="jurisdiction">Jurisdiction and Regulatory Requirements</Label>
+            <Input id="jurisdiction" placeholder="e.g., National, State, Local; Data sovereignty laws" value={formData.jurisdiction} onChange={(e) => handleInputChange('jurisdiction', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="currentInfrastructure">Current Infrastructure and Challenges</Label>
+            <Textarea id="currentInfrastructure" placeholder="Describe existing systems and pain points" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="budgetParameters">Timeline and Budget Parameters</Label>
+            <Input id="budgetParameters" placeholder="e.g., Q4 2025, $X budget" value={formData.budgetParameters} onChange={(e) => handleInputChange('budgetParameters', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="specificUseCases">Specific Use Cases and Requirements</Label>
+            <Textarea id="specificUseCases" placeholder="e.g., Citizen services, national data storage" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
+          </div>
+        </div>
+      )
+    }
+
+    if (formData.interestCategory.includes('enterprise')) {
+      fields.push(
+        <div key="enterpriseFields" className="space-y-6 border-t pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-slate-800">Enterprise Customer Specifics</h4>
+          <div className="space-y-2">
+            <Label htmlFor="currentInfrastructure">Current Infrastructure and Pain Points</Label>
+            <Textarea id="currentInfrastructure" placeholder="Describe your current cloud setup and challenges" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="specificUseCases">Technical Requirements and Constraints</Label>
+            <Textarea id="specificUseCases" placeholder="e.g., Specific workloads, compliance needs" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="complianceSecurity">Compliance and Security Needs</Label>
+            <Input id="complianceSecurity" placeholder="e.g., ISO 27001, HIPAA, GDPR" value={formData.complianceSecurity} onChange={(e) => handleInputChange('complianceSecurity', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="migrationTimeline">Migration Timeline and Priorities</Label>
+            <Input id="migrationTimeline" placeholder="e.g., Phased migration over 12 months" value={formData.migrationTimeline} onChange={(e) => handleInputChange('migrationTimeline', e.target.value)} />
+          </div>
+        </div>
+      )
+    }
+
+    if (formData.interestCategory.includes('telecom')) {
+      fields.push(
+        <div key="telecomFields" className="space-y-6 border-t pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-slate-800">Telecom/ISP Specifics</h4>
+          <div className="space-y-2">
+            <Label htmlFor="networkCoverage">Network Coverage and Infrastructure</Label>
+            <Textarea id="networkCoverage" placeholder="Describe your existing network assets" value={formData.networkCoverage} onChange={(e) => handleInputChange('networkCoverage', e.target.value)} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="customerBase">Customer Base and Requirements</Label>
+            <Textarea id="customerBase" placeholder="e.g., Residential, Business; Edge computing needs" value={formData.customerBase} onChange={(e) => handleInputChange('customerBase', e.target.value)} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="technicalIntegration">Technical Integration Capabilities</Label>
+            <Input id="technicalIntegration" placeholder="e.g., API, existing OSS/BSS" value={formData.technicalIntegration} onChange={(e) => handleInputChange('technicalIntegration', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="businessModelPreferences">Business Model Preferences</Label>
+            <Input id="businessModelPreferences" placeholder="e.g., Revenue sharing, direct purchase" value={formData.businessModelPreferences} onChange={(e) => handleInputChange('businessModelPreferences', e.target.value)} />
+          </div>
+        </div>
+      )
+    }
+
+    if (formData.interestCategory.includes('investor')) {
+      fields.push(
+        <div key="investorFields" className="space-y-6 border-t pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-slate-800">Investor/Partner Specifics</h4>
+          <div className="space-y-2">
+            <Label htmlFor="investmentRange">Investment Range of Interest</Label>
+            <select
+              id="investmentRange"
+              className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              value={formData.investmentRange}
+              onChange={(e) => handleInputChange('investmentRange', e.target.value)}
+            >
+              <option value="">Select investment range</option>
+              <option value="$10K-$50K">$10,000 - $50,000</option>
+              <option value="$50K-$100K">$50,000 - $100,000</option>
+              <option value="$100K-$500K">$100,000 - $500,000</option>
+              <option value="$500K-$1M">$500,000 - $1,000,000</option>
+              <option value="$1M+">$1,000,000+</option>
+              <option value="Institutional">Institutional Investment</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="strategicObjectives">Strategic Objectives and Synergies</Label>
+            <Textarea id="strategicObjectives" placeholder="How does this align with your strategic goals?" value={formData.strategicObjectives} onChange={(e) => handleInputChange('strategicObjectives', e.target.value)} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="commitmentLevel">Timeline and Commitment Level</Label>
+            <Input id="commitmentLevel" placeholder="e.g., Immediate, 6-12 months" value={formData.commitmentLevel} onChange={(e) => handleInputChange('commitmentLevel', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="partnershipStructure">Preferred Partnership Structure</Label>
+            <Input id="partnershipStructure" placeholder="e.g., Equity, Joint Venture, Strategic Alliance" value={formData.partnershipStructure} onChange={(e) => handleInputChange('partnershipStructure', e.target.value)} />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="accredited"
+              checked={formData.accredited}
+              onCheckedChange={(checked) => handleInputChange('accredited', checked)}
+            />
+            <Label htmlFor="accredited" className="text-sm">
+              I am an accredited investor (or will provide verification if required)
+            </Label>
+          </div>
+        </div>
+      )
+    }
+
+    if (formData.interestCategory.includes('individual')) {
+      fields.push(
+        <div key="individualFields" className="space-y-6 border-t pt-6 mt-6">
+          <h4 className="text-lg font-semibold text-slate-800">Individual/Community Specifics</h4>
+          <div className="space-y-2">
+            <Label htmlFor="location">Location and Connectivity</Label>
+            <Input id="location" placeholder="City, Country; Internet speed" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="technicalComfortLevel">Technical Comfort Level</Label>
+            <select
+              id="technicalComfortLevel"
+              className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              value={formData.technicalComfortLevel}
+              onChange={(e) => handleInputChange('technicalComfortLevel', e.target.value)}
+            >
+              <option value="">Select comfort level</option>
+              <option value="beginner">Beginner (Plug-and-play)</option>
+              <option value="intermediate">Intermediate (Some technical knowledge)</option>
+              <option value="advanced">Advanced (Developer/SysAdmin)</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="goals">Goals and Expectations</Label>
+            <Textarea id="goals" placeholder="What do you hope to achieve by joining?" value={formData.goals} onChange={(e) => handleInputChange('goals', e.target.value)} rows={3} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="communityInvolvementInterest">Community Involvement Interest</Label>
+            <Textarea id="communityInvolvementInterest" placeholder="Are you interested in participating in community governance or events?" value={formData.communityInvolvementInterest} onChange={(e) => handleInputChange('communityInvolvementInterest', e.target.value)} rows={3} />
+          </div>
+        </div>
+      )
+    }
+
+    return fields.length > 0 ? fields : null
+  }
+
+  return (
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+      <div className="max-w-4xl mx-auto">
+        <Card className="bg-white shadow-xl">
+          <CardHeader>
+            <CardTitle className="text-2xl text-center">Specific Requirements for {formData.interestCategory.map(cat => cat.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())).join(', ')}</CardTitle>
+            <CardDescription className="text-center text-lg">
+              Provide details for your selected interest categories. All fields are optional.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {renderFormFields()}
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  )
+}
+
+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 (
-          <>
-            <div className="space-y-2">
-              <Label htmlFor="propertyType">Property Type and Size</Label>
-              <Input id="propertyType" placeholder="e.g., Residential, Commercial, Industrial; 1000 sq ft" value={formData.propertyType} onChange={(e) => handleInputChange('propertyType', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="location">Location and Connectivity</Label>
-              <Input id="location" placeholder="City, Country; Fiber/Broadband availability" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="investmentTimeline">Investment Timeline</Label>
-              <Input id="investmentTimeline" placeholder="e.g., 3-6 months, 1 year+" value={formData.investmentTimeline} onChange={(e) => handleInputChange('investmentTimeline', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="revenueExpectations">Revenue Expectations</Label>
-              <Input id="revenueExpectations" placeholder="e.g., Passive income, property value increase" value={formData.revenueExpectations} onChange={(e) => handleInputChange('revenueExpectations', e.target.value)} />
-            </div>
-          </>
+          <Step1Form
+            formData={formData}
+            handleInputChange={handleInputChange}
+            formError={formError}
+          />
         )
-      case 'government':
+      case 2:
         return (
-          <>
-            <div className="space-y-2">
-              <Label htmlFor="jurisdiction">Jurisdiction and Regulatory Requirements</Label>
-              <Input id="jurisdiction" placeholder="e.g., National, State, Local; Data sovereignty laws" value={formData.jurisdiction} onChange={(e) => handleInputChange('jurisdiction', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="currentInfrastructure">Current Infrastructure and Challenges</Label>
-              <Textarea id="currentInfrastructure" placeholder="Describe existing systems and pain points" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="budgetParameters">Timeline and Budget Parameters</Label>
-              <Input id="budgetParameters" placeholder="e.g., Q4 2025, $X budget" value={formData.budgetParameters} onChange={(e) => handleInputChange('budgetParameters', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="specificUseCases">Specific Use Cases and Requirements</Label>
-              <Textarea id="specificUseCases" placeholder="e.g., Citizen services, national data storage" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
-            </div>
-          </>
+          <InterestSpecificStep
+            formData={formData}
+            handleInputChange={handleInputChange}
+          />
         )
-      case 'enterprise':
+      case 3:
         return (
-          <>
-            <div className="space-y-2">
-              <Label htmlFor="currentInfrastructure">Current Infrastructure and Pain Points</Label>
-              <Textarea id="currentInfrastructure" placeholder="Describe your current cloud setup and challenges" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="specificUseCases">Technical Requirements and Constraints</Label>
-              <Textarea id="specificUseCases" placeholder="e.g., Specific workloads, compliance needs" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="complianceSecurity">Compliance and Security Needs</Label>
-              <Input id="complianceSecurity" placeholder="e.g., ISO 27001, HIPAA, GDPR" value={formData.complianceSecurity} onChange={(e) => handleInputChange('complianceSecurity', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="migrationTimeline">Migration Timeline and Priorities</Label>
-              <Input id="migrationTimeline" placeholder="e.g., Phased migration over 12 months" value={formData.migrationTimeline} onChange={(e) => handleInputChange('migrationTimeline', e.target.value)} />
-            </div>
-          </>
-        )
-      case 'telecom':
-        return (
-          <>
-            <div className="space-y-2">
-              <Label htmlFor="networkCoverage">Network Coverage and Infrastructure</Label>
-              <Textarea id="networkCoverage" placeholder="Describe your existing network assets" value={formData.networkCoverage} onChange={(e) => handleInputChange('networkCoverage', e.target.value)} rows={3} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="customerBase">Customer Base and Requirements</Label>
-              <Textarea id="customerBase" placeholder="e.g., Residential, Business; Edge computing needs" value={formData.customerBase} onChange={(e) => handleInputChange('customerBase', e.target.value)} rows={3} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="technicalIntegration">Technical Integration Capabilities</Label>
-              <Input id="technicalIntegration" placeholder="e.g., API, existing OSS/BSS" value={formData.technicalIntegration} onChange={(e) => handleInputChange('technicalIntegration', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="businessModelPreferences">Business Model Preferences</Label>
-              <Input id="businessModelPreferences" placeholder="e.g., Revenue sharing, direct purchase" value={formData.businessModelPreferences} onChange={(e) => handleInputChange('businessModelPreferences', e.target.value)} />
-            </div>
-          </>
-        )
-      case 'investor':
-        return (
-          <>
-            <div className="space-y-2">
-              <Label htmlFor="investmentRange">Investment Range of Interest</Label>
-              <select
-                id="investmentRange"
-                className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                value={formData.investmentRange}
-                onChange={(e) => handleInputChange('investmentRange', e.target.value)}
-              >
-                <option value="">Select investment range</option>
-                <option value="$10K-$50K">$10,000 - $50,000</option>
-                <option value="$50K-$100K">$50,000 - $100,000</option>
-                <option value="$100K-$500K">$100,000 - $500,000</option>
-                <option value="$500K-$1M">$500,000 - $1,000,000</option>
-                <option value="$1M+">$1,000,000+</option>
-                <option value="Institutional">Institutional Investment</option>
-              </select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="strategicObjectives">Strategic Objectives and Synergies</Label>
-              <Textarea id="strategicObjectives" placeholder="How does this align with your strategic goals?" value={formData.strategicObjectives} onChange={(e) => handleInputChange('strategicObjectives', e.target.value)} rows={3} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="commitmentLevel">Timeline and Commitment Level</Label>
-              <Input id="commitmentLevel" placeholder="e.g., Immediate, 6-12 months" value={formData.commitmentLevel} onChange={(e) => handleInputChange('commitmentLevel', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="partnershipStructure">Preferred Partnership Structure</Label>
-              <Input id="partnershipStructure" placeholder="e.g., Equity, Joint Venture, Strategic Alliance" value={formData.partnershipStructure} onChange={(e) => handleInputChange('partnershipStructure', e.target.value)} />
-            </div>
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="accredited"
-                checked={formData.accredited}
-                onCheckedChange={(checked) => handleInputChange('accredited', checked)}
-              />
-              <Label htmlFor="accredited" className="text-sm">
-                I am an accredited investor (or will provide verification if required)
-              </Label>
-            </div>
-          </>
-        )
-      case 'individual':
-        return (
-          <>
-            <div className="space-y-2">
-              <Label htmlFor="location">Location and Connectivity</Label>
-              <Input id="location" placeholder="City, Country; Internet speed" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="technicalComfortLevel">Technical Comfort Level</Label>
-              <select
-                id="technicalComfortLevel"
-                className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                value={formData.technicalComfortLevel}
-                onChange={(e) => handleInputChange('technicalComfortLevel', e.target.value)}
-              >
-                <option value="">Select comfort level</option>
-                <option value="beginner">Beginner (Plug-and-play)</option>
-                <option value="intermediate">Intermediate (Some technical knowledge)</option>
-                <option value="advanced">Advanced (Developer/SysAdmin)</option>
-              </select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="goals">Goals and Expectations</Label>
-              <Textarea id="goals" placeholder="What do you hope to achieve by joining?" value={formData.goals} onChange={(e) => handleInputChange('goals', e.target.value)} rows={3} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="communityInvolvementInterest">Community Involvement Interest</Label>
-              <Textarea id="communityInvolvementInterest" placeholder="Are you interested in participating in community governance or events?" value={formData.communityInvolvementInterest} onChange={(e) => handleInputChange('communityInvolvementInterest', e.target.value)} rows={3} />
-            </div>
-          </>
+          <FinalStepForm
+            formData={formData}
+            handleInputChange={handleInputChange}
+            handleSubmit={handleSubmit}
+            isSubmitting={isSubmitting}
+            submitStatus={submitStatus}
+            formError={formError}
+          />
         )
       default:
         return null
@@ -300,242 +214,37 @@ function RegisterPage() {
         </div>
       </section>
 
-      {/* Choose Your Path */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">How Do You Want to Get Involved?</h2>
-          </div>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <Card 
-              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'realEstateDeveloper' ? 'border-blue-600 ring-2 ring-blue-600' : ''}`}
-              onClick={() => handleInputChange('interestCategory', 'realEstateDeveloper')}
-            >
-              <CardHeader>
-                <Building2 className="w-16 h-16 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Real Estate Developer</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Transform your properties into digital utilities.
-              </CardContent>
-            </Card>
-            <Card 
-              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'government' ? 'border-green-600 ring-2 ring-green-600' : ''}`}
-              onClick={() => handleInputChange('interestCategory', 'government')}
-            >
-              <CardHeader>
-                <Shield className="w-16 h-16 mx-auto mb-4 text-green-600" />
-                <CardTitle className="text-green-600">Government/Public Sector</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Build sovereign digital infrastructure.
-              </CardContent>
-            </Card>
-            <Card 
-              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'enterprise' ? 'border-purple-600 ring-2 ring-purple-600' : ''}`}
-              onClick={() => handleInputChange('interestCategory', 'enterprise')}
-            >
-              <CardHeader>
-                <Briefcase className="w-16 h-16 mx-auto mb-4 text-purple-600" />
-                <CardTitle className="text-purple-600">Enterprise Customer</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Deploy private, secure cloud infrastructure.
-              </CardContent>
-            </Card>
-            <Card 
-              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'telecom' ? 'border-orange-600 ring-2 ring-orange-600' : ''}`}
-              onClick={() => handleInputChange('interestCategory', 'telecom')}
-            >
-              <CardHeader>
-                <Network className="w-16 h-16 mx-auto mb-4 text-orange-600" />
-                <CardTitle className="text-orange-600">Telecom/ISP</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Extend your network with edge computing.
-              </CardContent>
-            </Card>
-            <Card 
-              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'investor' ? 'border-teal-600 ring-2 ring-teal-600' : ''}`}
-              onClick={() => handleInputChange('interestCategory', 'investor')}
-            >
-              <CardHeader>
-                <DollarSign className="w-16 h-16 mx-auto mb-4 text-teal-600" />
-                <CardTitle className="text-teal-600">Investor/Partner</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Join the ThreeFold ecosystem.
-              </CardContent>
-            </Card>
-            <Card 
-              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'individual' ? 'border-indigo-600 ring-2 ring-indigo-600' : ''}`}
-              onClick={() => handleInputChange('interestCategory', 'individual')}
-            >
-              <CardHeader>
-                <Users className="w-16 h-16 mx-auto mb-4 text-indigo-600" />
-                <CardTitle className="text-indigo-600">Individual/Community</CardTitle>
-              </CardHeader>
-              <CardContent>
-                Start with residential deployment.
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </section>
-
-      {/* Contact Form */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+      {/* Wizard Steps */}
+      <div className="py-16 px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto">
-          <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tell Us About Your Interest</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
-              Please fill out the form below. Fields will adapt based on your selection above.
-            </p>
+          {renderStep()}
+
+          {/* Navigation Buttons */}
+          <div className="flex justify-between mt-8">
+            {currentStep > 1 && (
+              <Button onClick={handlePrevious} variant="outline">
+                Previous
+              </Button>
+            )}
+            {currentStep < 3 && (
+              <Button onClick={handleNext} className="ml-auto">
+                Next
+              </Button>
+            )}
+            {currentStep === 3 && (
+              <Button
+                type="submit"
+                onClick={handleSubmit}
+                disabled={isSubmitting || !formData.terms}
+                className="ml-auto bg-blue-600 hover:bg-blue-700 text-lg py-3"
+              >
+                {isSubmitting ? 'Submitting...' : 'Register Your Interest'}
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Button>
+            )}
           </div>
-          
-          <Card className="bg-white shadow-xl">
-            <CardHeader>
-              <CardTitle className="text-2xl text-center">Required Information</CardTitle>
-              <CardDescription className="text-center text-lg">
-                Provide your contact details and a brief description of your requirements.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form onSubmit={handleSubmit} className="space-y-8">
-                {submitStatus === 'success' && (
-                  <div className="flex items-center gap-2 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800">
-                    <CheckCircle className="h-5 w-5" />
-                    <span>Thank you! Your interest has been registered successfully. We'll be in touch soon.</span>
-                  </div>
-                )}
-
-                {submitStatus === 'error' && (
-                  <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
-                    <AlertCircle className="h-5 w-5" />
-                    <span>There was an error registering your interest. Please ensure all required fields are filled and terms are agreed.</span>
-                  </div>
-                )}
-
-                {/* General Information */}
-                <div className="space-y-6">
-                  <h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
-                    <Users className="h-5 w-5 text-blue-600" />
-                    Your Contact Details
-                  </h3>
-                  
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <div className="space-y-2">
-                      <Label htmlFor="name">Full Name *</Label>
-                      <Input
-                        id="name"
-                        placeholder="Your full name"
-                        value={formData.name}
-                        onChange={(e) => handleInputChange('name', e.target.value)}
-                        required
-                      />
-                    </div>
-                    
-                    <div className="space-y-2">
-                      <Label htmlFor="email">Email Address *</Label>
-                      <Input
-                        id="email"
-                        type="email"
-                        placeholder="your@email.com"
-                        value={formData.email}
-                        onChange={(e) => handleInputChange('email', e.target.value)}
-                        required
-                      />
-                    </div>
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <Label htmlFor="company">Organization</Label>
-                    <Input
-                      id="company"
-                      placeholder="Your company or organization"
-                      value={formData.company}
-                      onChange={(e) => handleInputChange('company', e.target.value)}
-                    />
-                  </div>
-                </div>
-
-                {/* Dynamic Fields based on Interest Category */}
-                {formData.interestCategory && (
-                  <div className="space-y-6">
-                    <h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
-                      <Target className="h-5 w-5 text-green-600" />
-                      Specific Requirements for {formData.interestCategory.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
-                    </h3>
-                    {renderFormFields()}
-                  </div>
-                )}
-
-                {/* Common Optional Information */}
-                <div className="space-y-6">
-                  <h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
-                    <BookOpen className="h-5 w-5 text-purple-600" />
-                    Additional Information (Optional)
-                  </h3>
-                  
-                  <div className="space-y-2">
-                    <Label htmlFor="briefDescription">Brief Description of Requirements</Label>
-                    <Textarea
-                      id="briefDescription"
-                      placeholder="Tell us more about your needs and how ThreeFold can help."
-                      value={formData.briefDescription}
-                      onChange={(e) => handleInputChange('briefDescription', e.target.value)}
-                      rows={4}
-                    />
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <Label htmlFor="timeline">Timeline for Deployment</Label>
-                    <Input id="timeline" placeholder="e.g., Immediate, 3-6 months, 1 year+" value={formData.timeline} onChange={(e) => handleInputChange('timeline', e.target.value)} />
-                  </div>
-                  
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="newsletter"
-                      checked={formData.newsletter}
-                      onCheckedChange={(checked) => handleInputChange('newsletter', checked)}
-                    />
-                    <Label htmlFor="newsletter" className="text-sm">
-                      I'd like to receive updates about ThreeFold Galaxy's progress and opportunities
-                    </Label>
-                  </div>
-                </div>
-
-                {/* Terms */}
-                <div className="space-y-4">
-                  <div className="flex items-start space-x-2">
-                    <Checkbox
-                      id="terms"
-                      checked={formData.terms}
-                      onCheckedChange={(checked) => handleInputChange('terms', checked)}
-                      required
-                    />
-                    <Label htmlFor="terms" className="text-sm">
-                      I agree to the <Link to="/terms" className="text-blue-600 hover:underline">Terms and Conditions</Link> and <Link to="/privacy" className="text-blue-600 hover:underline">Privacy Policy</Link>. *
-                    </Label>
-                  </div>
-                </div>
-
-                {/* Submit Button */}
-                <div className="pt-6">
-                  <Button
-                    type="submit"
-                    disabled={isSubmitting || !formData.terms || !formData.name || !formData.email || !formData.interestCategory}
-                    className="w-full bg-blue-600 hover:bg-blue-700 text-lg py-3"
-                  >
-                    {isSubmitting ? 'Submitting...' : 'Register Your Interest'}
-                    <ArrowRight className="ml-2 h-5 w-5" />
-                  </Button>
-                </div>
-              </form>
-            </CardContent>
-          </Card>
         </div>
-      </section>
+      </div>
 
       {/* What Happens Next */}
       <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
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? */}
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center space-y-8 mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">How Do You Want to Get Involved?</h2>
+          </div>
+          {formError && (
+            <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 mb-8">
+              <AlertCircle className="h-5 w-5" />
+              <span>{formError}</span>
+            </div>
+          )}
+          <p className="text-lg text-slate-700 mb-8 text-center flex items-center justify-center gap-2">
+            <ArrowRight className="h-6 w-6 text-blue-600" /> <span className="font-bold">Please select one or more categories below that best describe your interest to reveal specific questions.</span>
+          </p>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <Card 
+              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('realEstateDeveloper') ? 'border-blue-600 ring-2 ring-blue-600' : ''}`}
+              onClick={() => handleInputChange('interestCategory', 'realEstateDeveloper')}
+            >
+              <CardHeader>
+                <Building2 className="w-16 h-16 mx-auto mb-4 text-blue-600" />
+                <CardTitle className="text-blue-600">Real Estate Developer</CardTitle>
+              </CardHeader>
+              <CardContent>
+                Transform your properties into digital utilities.
+              </CardContent>
+            </Card>
+            <Card 
+              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('government') ? 'border-green-600 ring-2 ring-green-600' : ''}`}
+              onClick={() => handleInputChange('interestCategory', 'government')}
+            >
+              <CardHeader>
+                <Shield className="w-16 h-16 mx-auto mb-4 text-green-600" />
+                <CardTitle className="text-green-600">Government/Public Sector</CardTitle>
+              </CardHeader>
+              <CardContent>
+                Build sovereign digital infrastructure.
+              </CardContent>
+            </Card>
+            <Card 
+              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('enterprise') ? 'border-purple-600 ring-2 ring-purple-600' : ''}`}
+              onClick={() => handleInputChange('interestCategory', 'enterprise')}
+            >
+              <CardHeader>
+                <Briefcase className="w-16 h-16 mx-auto mb-4 text-purple-600" />
+                <CardTitle className="text-purple-600">Enterprise Customer</CardTitle>
+              </CardHeader>
+              <CardContent>
+                Deploy private, secure cloud infrastructure.
+              </CardContent>
+            </Card>
+            <Card 
+              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('telecom') ? 'border-orange-600 ring-2 ring-orange-600' : ''}`}
+              onClick={() => handleInputChange('interestCategory', 'telecom')}
+            >
+              <CardHeader>
+                <Network className="w-16 h-16 mx-auto mb-4 text-orange-600" />
+                <CardTitle className="text-orange-600">Telecom/ISP</CardTitle>
+              </CardHeader>
+              <CardContent>
+                Extend your network with edge computing.
+              </CardContent>
+            </Card>
+            <Card 
+              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('investor') ? 'border-teal-600 ring-2 ring-teal-600' : ''}`}
+              onClick={() => handleInputChange('interestCategory', 'investor')}
+            >
+              <CardHeader>
+                <DollarSign className="w-16 h-16 mx-auto mb-4 text-teal-600" />
+                <CardTitle className="text-teal-600">Investor/Partner</CardTitle>
+              </CardHeader>
+              <CardContent>
+                Join the ThreeFold ecosystem.
+              </CardContent>
+            </Card>
+            <Card 
+              className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory.includes('individual') ? 'border-indigo-600 ring-2 ring-indigo-600' : ''}`}
+              onClick={() => handleInputChange('interestCategory', 'individual')}
+            >
+              <CardHeader>
+                <Users className="w-16 h-16 mx-auto mb-4 text-indigo-600" />
+                <CardTitle className="text-indigo-600">Individual/Community</CardTitle>
+              </CardHeader>
+              <CardContent>
+                Start with residential deployment.
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Form - General Information */}
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+        <div className="max-w-4xl mx-auto">
+          <Card className="bg-white shadow-xl">
+            <CardHeader>
+              <CardTitle className="text-2xl text-center">Your Contact Details</CardTitle>
+              <CardDescription className="text-center text-lg">
+                Provide your basic contact information.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-6">
+                <div className="grid md:grid-cols-2 gap-6">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Full Name *</Label>
+                    <Input
+                      id="name"
+                      placeholder="Your full name"
+                      value={formData.name}
+                      onChange={(e) => handleInputChange('name', e.target.value)}
+                      required
+                    />
+                  </div>
+                  
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email Address *</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="your@email.com"
+                      value={formData.email}
+                      onChange={(e) => handleInputChange('email', e.target.value)}
+                      required
+                    />
+                  </div>
+                </div>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="company">Organization</Label>
+                  <Input
+                    id="company"
+                    placeholder="Your company or organization"
+                    value={formData.company}
+                    onChange={(e) => handleInputChange('company', e.target.value)}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Step1Form
\ No newline at end of file