96 lines
5.3 KiB
JavaScript
96 lines
5.3 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
Briefcase,
|
|
User,
|
|
ShieldCheck,
|
|
ArrowRight,
|
|
Globe,
|
|
Zap
|
|
} from 'lucide-react';
|
|
|
|
export default function MobileWelcome() {
|
|
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="Welcome" />
|
|
|
|
{/* Background Decor */}
|
|
<div className="absolute top-[-10%] right-[-10%] w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50" />
|
|
<div className="absolute bottom-[-10%] left-[-10%] w-64 h-64 bg-[#185FA5]/5 rounded-full blur-3xl opacity-50" />
|
|
|
|
{/* Language Selector */}
|
|
<div className="px-6 pt-12 flex justify-end relative z-10">
|
|
<button className="flex items-center space-x-2 bg-slate-50 px-4 py-2 rounded-2xl border border-slate-100 active:scale-95 transition-all">
|
|
<Globe className="w-4 h-4 text-[#185FA5]" />
|
|
<span className="text-[10px] font-black uppercase tracking-widest">English</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 px-8 flex flex-col justify-center space-y-12 relative z-10">
|
|
{/* Hero */}
|
|
<div className="space-y-6 text-center">
|
|
<div className="flex justify-center">
|
|
<div className="w-20 h-20 bg-[#185FA5] rounded-[32px] flex items-center justify-center shadow-2xl shadow-blue-500/30">
|
|
<ShieldCheck className="w-10 h-10 text-white" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h1 className="text-4xl font-black tracking-tighter uppercase leading-none">Marketplace</h1>
|
|
<p className="text-[11px] font-black text-slate-300 uppercase tracking-[0.3em]">Direct Hiring Portal</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Selection Cards */}
|
|
<div className="space-y-4">
|
|
<Link
|
|
href="/mobile/employer/login"
|
|
className="group bg-white p-8 rounded-[40px] border-2 border-slate-50 shadow-sm flex items-center justify-between active:scale-95 transition-all hover:border-[#185FA5] hover:shadow-xl hover:shadow-blue-500/10"
|
|
>
|
|
<div className="flex items-center space-x-6">
|
|
<div className="w-16 h-16 bg-slate-50 rounded-[24px] flex items-center justify-center group-hover:bg-blue-50 transition-colors">
|
|
<Briefcase className="w-8 h-8 text-[#185FA5]" />
|
|
</div>
|
|
<div className="text-left">
|
|
<h3 className="text-xl font-black tracking-tight uppercase leading-none mb-2">Employer</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">I want to hire</p>
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="w-6 h-6 text-slate-200 group-hover:text-[#185FA5] transition-colors" />
|
|
</Link>
|
|
|
|
<Link
|
|
href="/mobile/worker/register"
|
|
className="group bg-white p-8 rounded-[40px] border-2 border-slate-50 shadow-sm flex items-center justify-between active:scale-95 transition-all hover:border-[#185FA5] hover:shadow-xl hover:shadow-blue-500/10"
|
|
>
|
|
<div className="flex items-center space-x-6">
|
|
<div className="w-16 h-16 bg-slate-50 rounded-[24px] flex items-center justify-center group-hover:bg-blue-50 transition-colors">
|
|
<User className="w-8 h-8 text-[#185FA5]" />
|
|
</div>
|
|
<div className="text-left">
|
|
<h3 className="text-xl font-black tracking-tight uppercase leading-none mb-2">Worker</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">I want a job</p>
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="w-6 h-6 text-slate-200 group-hover:text-[#185FA5] transition-colors" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="text-center pt-4">
|
|
<div className="flex items-center justify-center space-x-2 text-[10px] font-black text-slate-300 uppercase tracking-widest">
|
|
<Zap className="w-3 h-3 text-amber-500 fill-amber-500" />
|
|
<span>Trusted by 10k+ users</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Links */}
|
|
<div className="px-8 pb-12 text-center relative z-10">
|
|
<p className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-loose">
|
|
Need Help? <br />
|
|
<Link href="/support" className="text-[#185FA5] underline underline-offset-4 decoration-2">Contact Support</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|