migrant-web/resources/js/Pages/Mobile/EmployerWelcome.jsx
2026-05-15 17:40:21 +05:30

84 lines
4.7 KiB
JavaScript

import React from 'react';
import { Head, Link } from '@inertiajs/react';
import {
Briefcase,
ArrowRight,
Sparkles,
ShieldCheck,
Users
} from 'lucide-react';
export default function EmployerWelcome() {
return (
<div className="min-h-screen bg-[#D8F3FF] flex flex-col max-w-md mx-auto relative overflow-hidden">
<Head title="Welcome" />
{/* Artistic Header Background */}
<div className="h-[45vh] relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-[#185FA5] to-[#2573c0] rounded-b-[60px] shadow-2xl" />
<div className="absolute top-[10%] left-[10%] w-32 h-32 bg-white/10 rounded-full blur-2xl" />
<div className="absolute bottom-[20%] right-[-10%] w-64 h-64 bg-emerald-400/20 rounded-full blur-3xl" />
<div className="relative h-full flex flex-col items-center justify-center p-8 space-y-6 text-center animate-in slide-in-from-top duration-700">
<div className="w-20 h-20 bg-white/20 backdrop-blur-xl rounded-[28px] border border-white/30 flex items-center justify-center shadow-2xl">
<ShieldCheck className="w-10 h-10 text-white" strokeWidth={2.5} />
</div>
<div className="space-y-2">
<h1 className="text-3xl font-black text-white tracking-tighter uppercase leading-none">
Find Top <br /> Talent Fast
</h1>
<p className="text-blue-100/70 text-[11px] font-bold uppercase tracking-[0.2em]">The Future of Recruitment</p>
</div>
</div>
</div>
<div className="flex-1 px-8 pt-10 space-y-10 animate-in slide-in-from-bottom duration-700">
<div className="space-y-6">
<div className="flex items-start space-x-5">
<div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/5 shrink-0">
<Users className="w-6 h-6 text-[#185FA5]" strokeWidth={2.5} />
</div>
<div className="space-y-1">
<h4 className="font-black text-[#141B34] text-sm uppercase tracking-tight">Verified Workers</h4>
<p className="text-[11px] text-slate-400 font-bold uppercase tracking-tight leading-relaxed">Access 10,000+ pre-vetted domestic and commercial workers.</p>
</div>
</div>
<div className="flex items-start space-x-5">
<div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/5 shrink-0">
<Sparkles className="w-6 h-6 text-[#22D39B]" strokeWidth={2.5} />
</div>
<div className="space-y-1">
<h4 className="font-black text-[#141B34] text-sm uppercase tracking-tight">AI Matching</h4>
<p className="text-[11px] text-slate-400 font-bold uppercase tracking-tight leading-relaxed">Our smart engine matches workers based on your specific needs.</p>
</div>
</div>
</div>
<div className="space-y-4 pt-4">
<Link
href="/mobile/employer/login"
className="w-full h-18 bg-[#185FA5] text-white rounded-[28px] font-black text-sm uppercase tracking-[0.2em] shadow-[0_15px_35px_rgba(24,95,165,0.3)] flex items-center justify-center space-x-3 active:scale-95 transition-all"
>
<span>Login to Portal</span>
<ArrowRight className="w-5 h-5" strokeWidth={3} />
</Link>
<Link
href="/mobile/employer/register"
className="w-full h-18 bg-white text-[#185FA5] rounded-[28px] font-black text-sm uppercase tracking-[0.2em] shadow-lg flex items-center justify-center active:scale-95 transition-all border-2 border-white"
>
<span>Join as Employer</span>
</Link>
</div>
</div>
<div className="px-8 pb-10 text-center">
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-loose">
By continuing you agree to our <br />
<span className="text-[#185FA5] underline underline-offset-4">Terms of Service</span>
</p>
</div>
</div>
);
}