...
This commit is contained in:
parent
740e318ff8
commit
5420e59ff9
105
src/components/FinalStepForm.jsx
Normal file
105
src/components/FinalStepForm.jsx
Normal file
@ -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
|
||||||
212
src/components/InterestSpecificStep.jsx
Normal file
212
src/components/InterestSpecificStep.jsx
Normal file
@ -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
|
||||||
@ -7,14 +7,17 @@ import { Input } from './ui/input'
|
|||||||
import { Label } from './ui/label'
|
import { Label } from './ui/label'
|
||||||
import { Textarea } from './ui/textarea'
|
import { Textarea } from './ui/textarea'
|
||||||
import { Checkbox } from './ui/checkbox'
|
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 Navigation from './Navigation'
|
||||||
|
import Step1Form from './Step1Form'
|
||||||
|
import InterestSpecificStep from './InterestSpecificStep'
|
||||||
|
import FinalStepForm from './FinalStepForm'
|
||||||
|
|
||||||
function RegisterPage() {
|
function RegisterPage() {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
name: '',
|
name: '',
|
||||||
email: '',
|
email: '',
|
||||||
interestCategory: '',
|
interestCategory: [],
|
||||||
company: '',
|
company: '',
|
||||||
position: '',
|
position: '',
|
||||||
investmentRange: '',
|
investmentRange: '',
|
||||||
@ -49,24 +52,68 @@ function RegisterPage() {
|
|||||||
communityInvolvementInterest: ''
|
communityInvolvementInterest: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [currentStep, setCurrentStep] = useState(1)
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
|
const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
|
||||||
|
const [formError, setFormError] = useState(null) // For step-specific validation messages
|
||||||
|
|
||||||
const handleInputChange = (field, value) => {
|
const handleInputChange = (field, value) => {
|
||||||
setFormData(prev => ({
|
if (field === 'interestCategory') {
|
||||||
...prev,
|
setFormData(prev => {
|
||||||
[field]: value
|
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) => {
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setIsSubmitting(true)
|
setIsSubmitting(true)
|
||||||
setSubmitStatus(null)
|
setSubmitStatus(null)
|
||||||
|
setFormError(null)
|
||||||
|
|
||||||
// Basic validation for terms
|
// Final validation before submission
|
||||||
if (!formData.terms) {
|
if (!formData.terms) {
|
||||||
setSubmitStatus('error')
|
setSubmitStatus('error')
|
||||||
|
setFormError('You must agree to the Terms and Conditions and Privacy Policy.')
|
||||||
console.error('Terms not agreed.')
|
console.error('Terms not agreed.')
|
||||||
setIsSubmitting(false)
|
setIsSubmitting(false)
|
||||||
return
|
return
|
||||||
@ -97,7 +144,7 @@ function RegisterPage() {
|
|||||||
|
|
||||||
// Reset form after successful submission
|
// Reset form after successful submission
|
||||||
setFormData({
|
setFormData({
|
||||||
name: '', email: '', interestCategory: '', company: '', position: '',
|
name: '', email: '', interestCategory: [], company: '', position: '',
|
||||||
investmentRange: '', experience: '', motivation: '', accredited: false,
|
investmentRange: '', experience: '', motivation: '', accredited: false,
|
||||||
newsletter: false, terms: false, propertyType: '', propertySize: '',
|
newsletter: false, terms: false, propertyType: '', propertySize: '',
|
||||||
location: '', connectivity: '', investmentTimeline: '', revenueExpectations: '',
|
location: '', connectivity: '', investmentTimeline: '', revenueExpectations: '',
|
||||||
@ -116,166 +163,33 @@ function RegisterPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderFormFields = () => {
|
const renderStep = () => {
|
||||||
switch (formData.interestCategory) {
|
switch (currentStep) {
|
||||||
case 'realEstateDeveloper':
|
case 1:
|
||||||
return (
|
return (
|
||||||
<>
|
<Step1Form
|
||||||
<div className="space-y-2">
|
formData={formData}
|
||||||
<Label htmlFor="propertyType">Property Type and Size</Label>
|
handleInputChange={handleInputChange}
|
||||||
<Input id="propertyType" placeholder="e.g., Residential, Commercial, Industrial; 1000 sq ft" value={formData.propertyType} onChange={(e) => handleInputChange('propertyType', e.target.value)} />
|
formError={formError}
|
||||||
</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>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
case 'government':
|
case 2:
|
||||||
return (
|
return (
|
||||||
<>
|
<InterestSpecificStep
|
||||||
<div className="space-y-2">
|
formData={formData}
|
||||||
<Label htmlFor="jurisdiction">Jurisdiction and Regulatory Requirements</Label>
|
handleInputChange={handleInputChange}
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
case 'enterprise':
|
case 3:
|
||||||
return (
|
return (
|
||||||
<>
|
<FinalStepForm
|
||||||
<div className="space-y-2">
|
formData={formData}
|
||||||
<Label htmlFor="currentInfrastructure">Current Infrastructure and Pain Points</Label>
|
handleInputChange={handleInputChange}
|
||||||
<Textarea id="currentInfrastructure" placeholder="Describe your current cloud setup and challenges" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
|
handleSubmit={handleSubmit}
|
||||||
</div>
|
isSubmitting={isSubmitting}
|
||||||
<div className="space-y-2">
|
submitStatus={submitStatus}
|
||||||
<Label htmlFor="specificUseCases">Technical Requirements and Constraints</Label>
|
formError={formError}
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
default:
|
default:
|
||||||
return null
|
return null
|
||||||
@ -300,242 +214,37 @@ function RegisterPage() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Choose Your Path */}
|
{/* Wizard Steps */}
|
||||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
<div className="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
<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">
|
|
||||||
<div className="max-w-4xl mx-auto">
|
<div className="max-w-4xl mx-auto">
|
||||||
<div className="text-center space-y-8 mb-12">
|
{renderStep()}
|
||||||
<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">
|
{/* Navigation Buttons */}
|
||||||
Please fill out the form below. Fields will adapt based on your selection above.
|
<div className="flex justify-between mt-8">
|
||||||
</p>
|
{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>
|
</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>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
{/* What Happens Next */}
|
{/* What Happens Next */}
|
||||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||||
|
|||||||
157
src/components/Step1Form.jsx
Normal file
157
src/components/Step1Form.jsx
Normal file
@ -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
|
||||||
Loading…
Reference in New Issue
Block a user