first commit
This commit is contained in:
priyanshuvish
504
src/components/SelfLearnerSignUp.tsx
Normal file
504
src/components/SelfLearnerSignUp.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from './ui/button';
|
||||
import { Input } from './ui/input';
|
||||
import { Label } from './ui/label';
|
||||
import { Card, CardContent } from './ui/card';
|
||||
import { Checkbox } from './ui/checkbox';
|
||||
import {
|
||||
BookOpen,
|
||||
Users,
|
||||
Target,
|
||||
Award,
|
||||
ArrowRight,
|
||||
Eye,
|
||||
EyeOff,
|
||||
User,
|
||||
Mail,
|
||||
Lock,
|
||||
Phone
|
||||
} from 'lucide-react';
|
||||
import { navigateTo } from './Router';
|
||||
|
||||
export function SelfLearnerSignUp() {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
phoneNumber: ''
|
||||
});
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [agreeToTerms, setAgreeToTerms] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSignUp = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!agreeToTerms) {
|
||||
alert('Please agree to the Terms of Service and Privacy Policy');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate registration
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
// Navigate to dashboard or success page
|
||||
navigateTo('/dashboard');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const transformationFeatures = [
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: 'World-Class Content',
|
||||
description: 'Access premium leadership courses from industry experts'
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Global Community',
|
||||
description: 'Join 25,000+ leaders from top organizations worldwide'
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: 'Recognized Credentials',
|
||||
description: 'Earn certificates valued by Fortune 500 companies'
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: 'Personalized Path',
|
||||
description: 'Get customized learning recommendations based on your goals'
|
||||
}
|
||||
];
|
||||
|
||||
const learningFeatures = [
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: 'World-Class Content',
|
||||
description: 'Access cutting-edge leadership programs from industry experts and renowned faculty'
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Global Network',
|
||||
description: 'Connect with ambitious leaders worldwide and build lasting professional relationships'
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: 'Personalized Learning',
|
||||
description: 'Get customized learning paths based on your goals and leadership style'
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: 'Recognized Credentials',
|
||||
description: 'Earn certificates and credentials that advance your career and open new opportunities'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF' }}>
|
||||
{/* Main Content */}
|
||||
<div className="section-margin-x py-16">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
|
||||
{/* Two Column Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
|
||||
{/* Left Column - Content */}
|
||||
<div>
|
||||
{/* Leadership Transformation Section */}
|
||||
<div className="mb-12">
|
||||
<div className="mb-6">
|
||||
<span
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium"
|
||||
style={{
|
||||
backgroundColor: 'rgba(248, 195, 1, 0.15)',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
⭐ Join KLC Community
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
className="mb-4"
|
||||
style={{
|
||||
fontSize: 'var(--font-h3)',
|
||||
fontWeight: 'var(--font-weight-h3)',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Start Your Leadership Transformation
|
||||
</h2>
|
||||
|
||||
<p
|
||||
className="mb-8"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: 'var(--line-height-body)'
|
||||
}}
|
||||
>
|
||||
Join thousands of professionals who have accelerated their careers through KLC's
|
||||
proven leadership development programs. Your journey to becoming an exceptional leader starts here.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Your Learning Experience Awaits */}
|
||||
<div>
|
||||
<h2
|
||||
className="mb-8"
|
||||
style={{
|
||||
fontSize: 'var(--font-h4)',
|
||||
fontWeight: 'var(--font-weight-h4)',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Your Learning Experience Awaits
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{learningFeatures.map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<feature.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3
|
||||
className="font-medium mb-2"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: 'var(--line-height-small)'
|
||||
}}
|
||||
>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sign Up Form */}
|
||||
<div>
|
||||
<Card className="shadow-lg border-0">
|
||||
<CardContent className="p-8">
|
||||
|
||||
{/* Form Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h2
|
||||
className="mb-2"
|
||||
style={{
|
||||
fontSize: 'var(--font-h4)',
|
||||
fontWeight: 'var(--font-weight-h4)',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Create Your Account
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Join KLC and start your leadership journey
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Sign Up Form */}
|
||||
<form onSubmit={handleSignUp} className="space-y-6">
|
||||
|
||||
{/* Full Name */}
|
||||
<div>
|
||||
<Label
|
||||
htmlFor="fullName"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontWeight: '500',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Full Name *
|
||||
</Label>
|
||||
<div className="relative mt-2">
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
|
||||
<User className="w-5 h-5" />
|
||||
</div>
|
||||
<Input
|
||||
id="fullName"
|
||||
type="text"
|
||||
value={formData.fullName}
|
||||
onChange={(e) => handleInputChange('fullName', e.target.value)}
|
||||
placeholder="Your full name"
|
||||
required
|
||||
className="h-12 pl-12"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
backgroundColor: '#F3F3F5'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email Address */}
|
||||
<div>
|
||||
<Label
|
||||
htmlFor="email"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontWeight: '500',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Email Address *
|
||||
</Label>
|
||||
<div className="relative mt-2">
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
|
||||
<Mail className="w-5 h-5" />
|
||||
</div>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
className="h-12 pl-12"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
backgroundColor: '#F3F3F5'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<Label
|
||||
htmlFor="password"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontWeight: '500',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Password *
|
||||
</Label>
|
||||
<div className="relative mt-2">
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
|
||||
<Lock className="w-5 h-5" />
|
||||
</div>
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={formData.password}
|
||||
onChange={(e) => handleInputChange('password', e.target.value)}
|
||||
placeholder="Create a strong password"
|
||||
required
|
||||
className="h-12 pl-12 pr-12"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
backgroundColor: '#F3F3F5'
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phone Number (Optional) */}
|
||||
<div>
|
||||
<Label
|
||||
htmlFor="phoneNumber"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontWeight: '500',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Phone Number (Optional)
|
||||
</Label>
|
||||
<div className="relative mt-2">
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
|
||||
<Phone className="w-5 h-5" />
|
||||
</div>
|
||||
<Input
|
||||
id="phoneNumber"
|
||||
type="tel"
|
||||
value={formData.phoneNumber}
|
||||
onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
|
||||
placeholder="+1 234 567 8900"
|
||||
className="h-12 pl-12"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
backgroundColor: '#F3F3F5'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terms and Conditions */}
|
||||
<div className="flex items-start space-x-2">
|
||||
<Checkbox
|
||||
id="agreeToTerms"
|
||||
checked={agreeToTerms}
|
||||
onCheckedChange={setAgreeToTerms}
|
||||
className="mt-1"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="agreeToTerms"
|
||||
className="text-sm leading-relaxed"
|
||||
style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: 'var(--line-height-small)'
|
||||
}}
|
||||
>
|
||||
I agree to the{' '}
|
||||
<span className="text-blue-600 hover:text-blue-700 cursor-pointer">
|
||||
Terms of Service
|
||||
</span>{' '}
|
||||
and{' '}
|
||||
<span className="text-blue-600 hover:text-blue-700 cursor-pointer">
|
||||
Privacy Policy
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
{/* Create Account Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full h-14 text-white font-medium flex items-center justify-center gap-2"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)',
|
||||
fontSize: 'var(--font-body)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
borderRadius: '10px'
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Create Account
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Sign In Link */}
|
||||
<div className="text-center mt-6">
|
||||
<span
|
||||
className="text-gray-600"
|
||||
style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Already have an account?{' '}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => navigateTo('/self-learner-signin')}
|
||||
className="text-blue-600 hover:text-blue-700 transition-colors font-medium"
|
||||
style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Sign in here
|
||||
</button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Need Help Section - Separate Section Below */}
|
||||
<div
|
||||
className="section-margin-x py-12"
|
||||
style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h3
|
||||
className="mb-4"
|
||||
style={{
|
||||
fontSize: 'var(--font-h4)',
|
||||
fontWeight: 'var(--font-weight-h4)',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
Questions About Your Learning Journey?
|
||||
</h3>
|
||||
<p
|
||||
className="mb-6"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: 'var(--line-height-body)'
|
||||
}}
|
||||
>
|
||||
Our learning advisors are here to help you choose the right programs and get the most out of your leadership development experience.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontWeight: '500',
|
||||
padding: '0.75rem 2rem',
|
||||
borderRadius: '10px'
|
||||
}}
|
||||
>
|
||||
Speak with Learning Advisor
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user