70 lines
4.1 KiB
JavaScript
70 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerLayout from '@/Layouts/EmployerLayout';
|
|
import {
|
|
CheckCircle2,
|
|
ArrowRight,
|
|
Users,
|
|
MessageSquare,
|
|
Sparkles
|
|
} from 'lucide-react';
|
|
|
|
export default function Success({ worker }) {
|
|
return (
|
|
<EmployerLayout title="Offer Sent">
|
|
<Head title="Hiring Offer Sent" />
|
|
|
|
<div className="max-w-xl mx-auto py-12 px-4 select-none">
|
|
<div className="bg-white rounded-3xl border border-slate-200 shadow-xl overflow-hidden text-center p-12 space-y-8 relative">
|
|
{/* Decorative elements */}
|
|
<div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-emerald-400 to-[#185FA5]" />
|
|
<Sparkles className="absolute top-8 left-8 w-6 h-6 text-emerald-200" />
|
|
<Sparkles className="absolute bottom-8 right-8 w-8 h-8 text-blue-100" />
|
|
|
|
<div className="space-y-4">
|
|
<div className="w-24 h-24 bg-emerald-50 rounded-full flex items-center justify-center mx-auto border-4 border-white shadow-lg animate-bounce">
|
|
<CheckCircle2 className="w-12 h-12 text-emerald-500" />
|
|
</div>
|
|
<h1 className="text-3xl font-black text-slate-900 tracking-tight">Offer Sent!</h1>
|
|
<p className="text-slate-500 font-bold text-sm max-w-xs mx-auto leading-relaxed uppercase tracking-widest">
|
|
Your hiring offer has been successfully sent to <span className="text-[#185FA5]">{worker.name}</span>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-slate-50 rounded-2xl p-6 border border-slate-100 space-y-3">
|
|
<h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">What's next?</h3>
|
|
<ul className="text-left space-y-4">
|
|
<li className="flex items-start space-x-3 text-xs font-bold text-slate-700">
|
|
<div className="w-5 h-5 bg-white rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm border border-slate-100 text-[#185FA5]">1</div>
|
|
<span>The worker will receive a notification and SMS with your offer details.</span>
|
|
</li>
|
|
<li className="flex items-start space-x-3 text-xs font-bold text-slate-700">
|
|
<div className="w-5 h-5 bg-white rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm border border-slate-100 text-[#185FA5]">2</div>
|
|
<span>You can track their response in your "Candidates" dashboard.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-3 pt-4">
|
|
<Link
|
|
href="/employer/candidates"
|
|
className="w-full bg-[#185FA5] text-white py-4 rounded-xl font-black text-xs uppercase tracking-widest shadow-xl shadow-blue-500/20 hover:bg-[#144f8a] transition-all flex items-center justify-center space-x-2 group"
|
|
>
|
|
<span>Go to Candidates</span>
|
|
<Users className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
|
|
<Link
|
|
href="/employer/workers"
|
|
className="w-full bg-white text-slate-600 border border-slate-200 py-4 rounded-xl font-black text-xs uppercase tracking-widest hover:bg-slate-50 transition-all flex items-center justify-center space-x-2"
|
|
>
|
|
<span>Find More Workers</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|