196 lines
11 KiB
JavaScript
196 lines
11 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
User,
|
|
Phone,
|
|
MapPin,
|
|
ChevronRight,
|
|
CheckCircle2,
|
|
ArrowLeft,
|
|
Camera,
|
|
Briefcase,
|
|
ShieldCheck,
|
|
Globe
|
|
} from 'lucide-react';
|
|
|
|
export default function WorkerRegister() {
|
|
const [step, setStep] = useState(1);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
phone: '',
|
|
nationality: 'Kenya',
|
|
role: 'Cleaner',
|
|
});
|
|
|
|
const nextStep = () => setStep(prev => prev + 1);
|
|
|
|
const nationalities = [
|
|
{ name: 'Kenya', flag: '🇰🇪' },
|
|
{ name: 'Philippines', flag: '🇵🇭' },
|
|
{ name: 'India', flag: '🇮🇳' },
|
|
{ name: 'Pakistan', flag: '🇵🇰' },
|
|
{ name: 'Nepal', flag: '🇳🇵' },
|
|
{ name: 'Other', flag: '🌍' }
|
|
];
|
|
|
|
const roles = [
|
|
{ name: 'Cleaner', icon: '🧼' },
|
|
{ name: 'Driver', icon: '🚗' },
|
|
{ name: 'Mason', icon: '🏗️' },
|
|
{ name: 'Electrician', icon: '⚡' },
|
|
{ name: 'Plumber', icon: '🔧' },
|
|
{ name: 'Helper', icon: '📦' }
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden">
|
|
<Head title="Join as Worker" />
|
|
|
|
{/* Top Bar */}
|
|
<div className="px-6 pt-12 pb-6 flex items-center justify-between sticky top-0 bg-white z-50">
|
|
<button onClick={() => step > 1 ? setStep(step - 1) : window.history.back()} className="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-900 border border-slate-100 active:scale-95 transition-all">
|
|
<ArrowLeft className="w-6 h-6" />
|
|
</button>
|
|
<div className="flex items-center space-x-1.5">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className={`h-1.5 rounded-full transition-all duration-500 ${step === i ? 'w-8 bg-[#185FA5]' : 'w-2 bg-slate-100'}`} />
|
|
))}
|
|
</div>
|
|
<div className="w-12" />
|
|
</div>
|
|
|
|
<div className="flex-1 px-8 py-4 overflow-y-auto pb-32">
|
|
{step === 1 && (
|
|
<div className="space-y-8 animate-in fade-in slide-in-from-right-6 duration-500">
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-black tracking-tight leading-tight">Your basic info.</h1>
|
|
<p className="text-slate-400 font-bold text-xs uppercase tracking-[0.2em]">Step 1 of 3</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="space-y-3">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Full Name</label>
|
|
<div className="relative">
|
|
<User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
placeholder="Enter your name"
|
|
className="w-full pl-12 pr-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
value={formData.name}
|
|
onChange={e => setFormData({...formData, name: e.target.value})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Phone Number</label>
|
|
<div className="relative">
|
|
<Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
placeholder="+971 XX XXX XXXX"
|
|
className="w-full pl-12 pr-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
value={formData.phone}
|
|
onChange={e => setFormData({...formData, phone: e.target.value})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Where are you from?</label>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{nationalities.map((nat) => (
|
|
<button
|
|
key={nat.name}
|
|
onClick={() => setFormData({...formData, nationality: nat.name})}
|
|
className={`p-4 rounded-3xl border-2 flex flex-col items-center justify-center space-y-2 transition-all active:scale-95 ${
|
|
formData.nationality === nat.name ? 'border-[#185FA5] bg-blue-50' : 'border-slate-50 bg-slate-50 text-slate-400'
|
|
}`}
|
|
>
|
|
<span className="text-2xl">{nat.flag}</span>
|
|
<span className="text-[9px] font-black uppercase tracking-tight">{nat.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<div className="space-y-8 animate-in fade-in slide-in-from-right-6 duration-500">
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-black tracking-tight leading-tight">What do you do?</h1>
|
|
<p className="text-slate-400 font-bold text-xs uppercase tracking-[0.2em]">Step 2 of 3</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{roles.map(role => (
|
|
<button
|
|
key={role.name}
|
|
onClick={() => setFormData({...formData, role: role.name})}
|
|
className={`p-6 rounded-[32px] border-2 text-center transition-all flex flex-col items-center space-y-4 active:scale-95 ${
|
|
formData.role === role.name ? 'border-[#185FA5] bg-blue-50 shadow-xl shadow-blue-500/5' : 'border-slate-50 bg-slate-50 text-slate-400'
|
|
}`}
|
|
>
|
|
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-3xl ${formData.role === role.name ? 'bg-white shadow-md' : 'bg-white/50'}`}>
|
|
{role.icon}
|
|
</div>
|
|
<span className={`font-black text-[11px] uppercase tracking-[0.1em] ${formData.role === role.name ? 'text-slate-900' : ''}`}>{role.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{step === 3 && (
|
|
<div className="space-y-8 animate-in fade-in slide-in-from-right-6 duration-500">
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-black tracking-tight leading-tight">Verify Identity.</h1>
|
|
<p className="text-slate-400 font-bold text-xs uppercase tracking-[0.2em]">Final Step</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="p-10 border-4 border-dashed border-slate-100 rounded-[40px] bg-slate-50 flex flex-col items-center justify-center text-center space-y-6 active:scale-95 transition-all cursor-pointer hover:border-blue-200">
|
|
<div className="w-24 h-24 bg-white rounded-[32px] flex items-center justify-center shadow-xl">
|
|
<Camera className="w-12 h-12 text-[#185FA5]" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="font-black text-sm uppercase tracking-tight">Upload Passport</h3>
|
|
<p className="text-[10px] font-black text-slate-300 uppercase tracking-widest">TAP TO OPEN CAMERA</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 bg-emerald-50 rounded-3xl border border-emerald-100 flex items-start space-x-4">
|
|
<ShieldCheck className="w-6 h-6 text-emerald-600 shrink-0" />
|
|
<p className="text-[9px] font-black text-emerald-800 uppercase tracking-widest leading-relaxed">
|
|
Your data is 100% secure. We only show documents to verified employers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bottom Button */}
|
|
<div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-8 bg-white/90 backdrop-blur-xl border-t border-slate-50 z-50">
|
|
{step < 3 ? (
|
|
<button
|
|
onClick={nextStep}
|
|
className="w-full bg-[#185FA5] text-white py-5 rounded-[28px] font-black text-[11px] uppercase tracking-[0.2em] shadow-2xl shadow-blue-500/20 active:scale-95 transition-all"
|
|
>
|
|
Next Step
|
|
</button>
|
|
) : (
|
|
<Link
|
|
href="/mobile/worker/home"
|
|
className="w-full bg-[#185FA5] text-white py-5 rounded-[28px] font-black text-[11px] uppercase tracking-[0.2em] shadow-2xl shadow-blue-500/20 active:scale-95 transition-all flex items-center justify-center"
|
|
>
|
|
Join Marketplace
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|