tfgrid/wwww_3node_tenstorrent
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk
2025-07-24 11:49:38 +02:00
parent 740e318ff8
commit 5420e59ff9
4 changed files with 579 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/Step1Form.jsx Normal file
View 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