511 lines
35 KiB
JavaScript
511 lines
35 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useForm, Head, Link } from '@inertiajs/react';
|
|
import {
|
|
CheckCircle,
|
|
Camera,
|
|
Eye,
|
|
EyeOff,
|
|
X,
|
|
Loader2,
|
|
FileText,
|
|
AlertCircle,
|
|
CreditCard,
|
|
ShieldCheck,
|
|
ChevronRight,
|
|
Lock,
|
|
User,
|
|
Mail,
|
|
Phone as PhoneIcon,
|
|
ArrowRight,
|
|
ArrowLeft,
|
|
Check,
|
|
Briefcase
|
|
} from 'lucide-react';
|
|
|
|
export default function Register() {
|
|
const [step, setStep] = useState(1);
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
emirates_id_front: null,
|
|
emirates_id_back: null,
|
|
selected_plan: 'premium',
|
|
card_number: '',
|
|
expiry: '',
|
|
cvc: '',
|
|
});
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [frontFileName, setFrontFileName] = useState(null);
|
|
const [backFileName, setBackFileName] = useState(null);
|
|
|
|
const plans = [
|
|
{ id: 'basic', name: 'Basic Search', price: '99', features: ['Browse 500+ workers', 'Shortlist up to 10', 'Standard vetting'] },
|
|
{ id: 'premium', name: 'Premium Pass', price: '199', features: ['Unlimited shortlisting', 'Direct messaging', 'Priority scheduling'], popular: true },
|
|
{ id: 'vip', name: 'VIP Concierge', price: '499', features: ['Assigned manager', 'Medical guarantee', 'Free replacements'] },
|
|
];
|
|
|
|
const nextStep = () => setStep(prev => prev + 1);
|
|
const prevStep = () => setStep(prev => prev - 1);
|
|
|
|
const handleFileChange = (e, field) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
setData(field, file);
|
|
const sizeMb = (file.size / (1024 * 1024)).toFixed(1);
|
|
if (field === 'emirates_id_front') {
|
|
setFrontFileName(`${file.name} (${sizeMb} MB)`);
|
|
} else {
|
|
setBackFileName(`${file.name} (${sizeMb} MB)`);
|
|
}
|
|
}
|
|
};
|
|
|
|
const removeFile = (field) => {
|
|
setData(field, null);
|
|
if (field === 'emirates_id_front') {
|
|
setFrontFileName(null);
|
|
} else {
|
|
setBackFileName(null);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
post('/employer/register');
|
|
};
|
|
|
|
const renderStepIndicator = () => (
|
|
<div className="flex items-center justify-between mb-12 relative max-w-md mx-auto px-4">
|
|
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-slate-100 -translate-y-1/2 -z-10" />
|
|
<div className="absolute top-1/2 left-0 h-0.5 bg-[#185FA5] -translate-y-1/2 -z-10 transition-all duration-500" style={{ width: `${(step - 1) * 33.33}%` }} />
|
|
|
|
{[1, 2, 3, 4].map((s) => (
|
|
<div key={s} className="flex flex-col items-center">
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center font-black text-sm transition-all duration-500 border-4 ${
|
|
step >= s ? 'bg-[#185FA5] text-white border-blue-100 scale-110 shadow-lg' : 'bg-white text-slate-400 border-slate-50'
|
|
}`}>
|
|
{step > s ? <Check className="w-5 h-5" /> : s}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen grid grid-cols-1 lg:grid-cols-12 bg-[#F8FAFC] font-sans selection:bg-blue-100 selection:text-[#185FA5]">
|
|
<Head title="Employer Registration - Secure Portal" />
|
|
|
|
{/* Left Brand Panel */}
|
|
<div className="hidden lg:flex lg:col-span-4 bg-[#185FA5] p-16 flex-col justify-between text-white relative overflow-hidden select-none sticky top-0 h-screen">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.1),transparent)] pointer-events-none" />
|
|
<div className="absolute bottom-0 left-0 right-0 h-64 bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
|
|
|
|
<div className="relative z-10 space-y-10">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-white text-[#185FA5] rounded-2xl flex items-center justify-center font-black text-2xl shadow-2xl">
|
|
M
|
|
</div>
|
|
<span className="font-black text-2xl tracking-tighter uppercase">Marketplace</span>
|
|
</div>
|
|
|
|
<div className="space-y-6 pt-10">
|
|
<h1 className="text-5xl font-black tracking-tighter leading-[1.1] drop-shadow-sm">
|
|
The Secure Hub for Direct Hiring.
|
|
</h1>
|
|
<p className="text-blue-100 text-lg font-medium leading-relaxed opacity-90">
|
|
Join 12,000+ employers hiring domestic workers directly with verified documentation.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-6 pt-12 border-t border-white/10">
|
|
{[
|
|
{ title: 'Verified Profiles', desc: 'Every worker is OCR vetted and legally checked.', icon: ShieldCheck },
|
|
{ title: 'Instant Access', desc: 'Connect with candidates in seconds after verification.', icon: ArrowRight },
|
|
{ title: 'Zero Fees', desc: 'No recruitment agency commissions, ever.', icon: CheckCircle }
|
|
].map((feat, i) => (
|
|
<div key={i} className="flex items-start space-x-4 group">
|
|
<div className="p-2.5 bg-white/10 rounded-xl group-hover:bg-white/20 transition-colors">
|
|
<feat.icon className="w-6 h-6 text-emerald-300" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-black text-base uppercase tracking-wider">{feat.title}</h3>
|
|
<p className="text-sm text-blue-100 font-medium opacity-80">{feat.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 text-[10px] font-black uppercase tracking-[0.3em] text-blue-300 opacity-60">
|
|
Empowering Household Recruitment Since 2024
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Registration Content */}
|
|
<div className="col-span-1 lg:col-span-8 flex flex-col items-center py-12 px-6 sm:px-12 overflow-y-auto">
|
|
<div className="w-full max-w-2xl">
|
|
<div className="text-center mb-10">
|
|
<h2 className="text-3xl font-black text-slate-900 tracking-tight uppercase">Employer Enrollment</h2>
|
|
<p className="text-sm font-bold text-slate-400 mt-2 uppercase tracking-widest">Step {step} of 4: {
|
|
step === 1 ? 'Account Security' :
|
|
step === 2 ? 'Identity Verification' :
|
|
step === 3 ? 'Choose Your Plan' : 'Secure Payment'
|
|
}</p>
|
|
</div>
|
|
|
|
{renderStepIndicator()}
|
|
|
|
<div className="bg-white rounded-[40px] shadow-[0_20px_50px_rgba(0,0,0,0.04)] border border-slate-100 p-8 sm:p-12 transition-all duration-500 animate-in fade-in slide-in-from-bottom-4">
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
|
|
{/* Step 1: Account Creation */}
|
|
{step === 1 && (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="md:col-span-2 space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Full Legal Name</label>
|
|
<div className="relative group">
|
|
<User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
|
|
<input
|
|
type="text"
|
|
value={data.name}
|
|
onChange={(e) => setData('name', e.target.value)}
|
|
placeholder="e.g. Abdullah Bin Ahmed"
|
|
className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Work Email</label>
|
|
<div className="relative group">
|
|
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
|
|
<input
|
|
type="email"
|
|
value={data.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
placeholder="employer@domain.com"
|
|
className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Mobile Access</label>
|
|
<div className="relative group">
|
|
<PhoneIcon className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
|
|
<input
|
|
type="text"
|
|
value={data.phone}
|
|
onChange={(e) => setData('phone', e.target.value)}
|
|
placeholder="+971 XX XXX XXXX"
|
|
className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Secure Password</label>
|
|
<div className="relative group">
|
|
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
|
|
<input
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={data.password}
|
|
onChange={(e) => setData('password', e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full pl-12 pr-12 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 p-2 text-slate-400 hover:text-slate-600"
|
|
>
|
|
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Confirm Access</label>
|
|
<input
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={data.password_confirmation}
|
|
onChange={(e) => setData('password_confirmation', e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={nextStep}
|
|
className="w-full bg-[#185FA5] hover:bg-[#144f8a] text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/20 flex items-center justify-center space-x-2 mt-8"
|
|
>
|
|
<span>Verify Identity</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Emirates ID */}
|
|
{step === 2 && (
|
|
<div className="space-y-8">
|
|
<div className="bg-amber-50 border border-amber-100 p-6 rounded-3xl flex items-start space-x-4">
|
|
<AlertCircle className="w-6 h-6 text-amber-600 shrink-0" />
|
|
<p className="text-[11px] font-bold text-amber-800 leading-relaxed uppercase tracking-wider">
|
|
In compliance with UAE Labor Law, all employers must verify their identity using a valid Emirates ID before accessing the marketplace.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{[
|
|
{ field: 'emirates_id_front', label: 'Emirates ID Front', file: frontFileName },
|
|
{ field: 'emirates_id_back', label: 'Emirates ID Back', file: backFileName }
|
|
].map((slot) => (
|
|
<div key={slot.field} className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">{slot.label}</label>
|
|
{slot.file ? (
|
|
<div className="relative aspect-[1.6/1] bg-slate-50 rounded-[32px] border-2 border-[#185FA5] flex flex-col items-center justify-center p-6 text-center shadow-lg shadow-blue-500/5">
|
|
<FileText className="w-10 h-10 text-[#185FA5] mb-2" />
|
|
<span className="text-[10px] font-black text-slate-900 uppercase truncate max-w-full px-4">{slot.file}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeFile(slot.field)}
|
|
className="absolute -top-2 -right-2 bg-rose-500 text-white p-2 rounded-full shadow-lg hover:bg-rose-600 transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<label className="relative aspect-[1.6/1] bg-slate-50 rounded-[32px] border-4 border-dashed border-slate-200 flex flex-col items-center justify-center p-8 text-center cursor-pointer hover:border-[#185FA5] hover:bg-blue-50 transition-all group">
|
|
<div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center shadow-md mb-4 group-hover:scale-110 transition-transform">
|
|
<Camera className="w-8 h-8 text-slate-300 group-hover:text-[#185FA5]" />
|
|
</div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-[#185FA5]">Tap to upload</span>
|
|
<input
|
|
type="file"
|
|
accept=".jpg,.jpeg,.png,.pdf"
|
|
className="hidden"
|
|
onChange={(e) => handleFileChange(e, slot.field)}
|
|
/>
|
|
</label>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex gap-4 pt-6">
|
|
<button
|
|
type="button"
|
|
onClick={prevStep}
|
|
className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all flex items-center justify-center space-x-2"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Back</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={nextStep}
|
|
disabled={!frontFileName || !backFileName}
|
|
className="flex-[2] bg-[#185FA5] hover:bg-[#144f8a] disabled:opacity-50 text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/20 flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Select Plan</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 3: Plan Selection */}
|
|
{step === 3 && (
|
|
<div className="space-y-8">
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{plans.map((p) => (
|
|
<button
|
|
key={p.id}
|
|
type="button"
|
|
onClick={() => setData('selected_plan', p.id)}
|
|
className={`p-6 rounded-[32px] border-4 text-left transition-all relative overflow-hidden flex items-center justify-between group ${
|
|
data.selected_plan === p.id
|
|
? 'bg-blue-50 border-[#185FA5] shadow-xl shadow-blue-500/10'
|
|
: 'bg-white border-slate-50 hover:border-slate-200'
|
|
}`}
|
|
>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center space-x-3">
|
|
<h4 className="text-lg font-black text-slate-900 uppercase tracking-tight">{p.name}</h4>
|
|
{p.popular && <span className="bg-emerald-500 text-white px-2 py-0.5 rounded-full text-[9px] font-black uppercase">Most Popular</span>}
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
{p.features.slice(0, 2).map((f, i) => (
|
|
<div key={i} className="flex items-center space-x-1.5 text-[10px] font-bold text-slate-500">
|
|
<CheckCircle className="w-3.5 h-3.5 text-emerald-500" />
|
|
<span>{f}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-2xl font-black text-[#185FA5]">{p.price} <span className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">AED</span></div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-1">One Time Access</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex gap-4 pt-6">
|
|
<button
|
|
type="button"
|
|
onClick={prevStep}
|
|
className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all flex items-center justify-center space-x-2"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Back</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={nextStep}
|
|
className="flex-[2] bg-[#185FA5] hover:bg-[#144f8a] text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/20 flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Pay & Register</span>
|
|
<CreditCard className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 4: Secure Payment */}
|
|
{step === 4 && (
|
|
<div className="space-y-8 animate-in zoom-in-95 duration-500">
|
|
<div className="bg-slate-900 rounded-[32px] p-8 text-white relative overflow-hidden shadow-2xl">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl -mr-32 -mt-32" />
|
|
<div className="flex justify-between items-start mb-12 relative z-10">
|
|
<div className="w-12 h-10 bg-slate-800 rounded-lg border border-slate-700 flex items-center justify-center">
|
|
<div className="w-8 h-6 bg-gradient-to-br from-amber-200 to-amber-500 rounded" />
|
|
</div>
|
|
<CreditCard className="w-10 h-10 text-white/20" />
|
|
</div>
|
|
<div className="space-y-4 relative z-10">
|
|
<div className="text-xl font-medium tracking-[0.2em] h-8 font-mono">
|
|
{data.card_number || '•••• •••• •••• ••••'}
|
|
</div>
|
|
<div className="flex justify-between items-end">
|
|
<div>
|
|
<div className="text-[10px] font-black text-white/40 uppercase tracking-widest mb-1">Card Holder</div>
|
|
<div className="text-sm font-bold uppercase tracking-widest">{data.name || 'Your Name'}</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-[10px] font-black text-white/40 uppercase tracking-widest mb-1">Expires</div>
|
|
<div className="text-sm font-bold uppercase tracking-widest">{data.expiry || 'MM/YY'}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Card Number</label>
|
|
<div className="relative group">
|
|
<CreditCard className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
|
|
<input
|
|
type="text"
|
|
maxLength="19"
|
|
value={data.card_number}
|
|
onChange={(e) => setData('card_number', e.target.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim())}
|
|
placeholder="4242 4242 4242 4242"
|
|
className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Expiry Date</label>
|
|
<input
|
|
type="text"
|
|
maxLength="5"
|
|
value={data.expiry}
|
|
onChange={(e) => setData('expiry', e.target.value.replace(/^(\d{2})/, '$1/'))}
|
|
placeholder="MM/YY"
|
|
className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none text-center"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Security Code</label>
|
|
<input
|
|
type="password"
|
|
maxLength="4"
|
|
value={data.cvc}
|
|
onChange={(e) => setData('cvc', e.target.value)}
|
|
placeholder="CVC"
|
|
className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none text-center"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 bg-blue-50 rounded-3xl border border-blue-100 flex items-center justify-between">
|
|
<div>
|
|
<div className="text-[10px] font-black text-blue-600 uppercase tracking-widest">Total Amount</div>
|
|
<div className="text-xl font-black text-slate-900">{plans.find(p => p.id === data.selected_plan)?.price} AED</div>
|
|
</div>
|
|
<ShieldCheck className="w-8 h-8 text-[#185FA5] opacity-20" />
|
|
</div>
|
|
|
|
<div className="flex gap-4 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={prevStep}
|
|
className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all flex items-center justify-center space-x-2"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Back</span>
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="flex-[2] bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-emerald-500/20 flex items-center justify-center space-x-2"
|
|
>
|
|
{processing ? <Loader2 className="w-5 h-5 animate-spin mr-2" /> : (
|
|
<>
|
|
<span>Complete & Pay</span>
|
|
<Lock className="w-4 h-4" />
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<p className="text-[10px] text-slate-400 text-center font-bold uppercase tracking-widest">
|
|
Secured by 256-bit AES encryption
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<div className="mt-12 text-center">
|
|
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest">
|
|
Already part of the network?{' '}
|
|
<Link href="/employer/login" className="text-[#185FA5] hover:underline">
|
|
Authorize Account
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|