212 lines
13 KiB
JavaScript
212 lines
13 KiB
JavaScript
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 |