174 lines
11 KiB
JavaScript
174 lines
11 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
TrendingUp,
|
|
Users,
|
|
CheckCircle2,
|
|
ArrowRight,
|
|
Shield,
|
|
Lock,
|
|
Globe,
|
|
Zap
|
|
} from 'lucide-react';
|
|
|
|
export default function PublicStats({ total_workers, avg_hires, total_hires_all }) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-900 text-white flex flex-col justify-between selection:bg-emerald-500 selection:text-slate-900">
|
|
<Head title="Platform Performance & Trust Metrics - Direct Hire Marketplace" />
|
|
|
|
{/* Navigation Header */}
|
|
<header className="border-b border-white/10 bg-slate-950/50 backdrop-blur-md sticky top-0 z-50">
|
|
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-bold text-lg text-white shadow-lg shadow-blue-500/30">
|
|
M
|
|
</div>
|
|
<span className="font-extrabold tracking-tight text-lg text-white">
|
|
Direct<span className="text-blue-400">Market</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<Link
|
|
href="/employer/login"
|
|
className="text-sm font-semibold text-slate-300 hover:text-white transition-colors px-4 py-2"
|
|
>
|
|
Sign In
|
|
</Link>
|
|
<Link
|
|
href="/employer/register"
|
|
className="bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold px-5 py-2.5 rounded-xl transition-all shadow-md shadow-blue-600/20"
|
|
>
|
|
Register
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero Section */}
|
|
<main className="flex-grow py-20 px-6 max-w-5xl mx-auto w-full flex flex-col justify-center space-y-16">
|
|
<div className="text-center space-y-6 max-w-3xl mx-auto">
|
|
<div className="inline-flex items-center space-x-2 px-3 py-1 bg-emerald-500/10 rounded-full text-xs font-semibold text-emerald-400 border border-emerald-500/20">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
|
<span>Live Platform Growth Metrics</span>
|
|
</div>
|
|
<h1 className="text-4xl sm:text-5xl font-black tracking-tight leading-none text-slate-100">
|
|
Transparency First. <br className="hidden sm:block"/>
|
|
<span className="bg-gradient-to-r from-blue-400 via-indigo-400 to-emerald-400 bg-clip-text text-transparent">Direct & Verified Hiring.</span>
|
|
</h1>
|
|
<p className="text-slate-400 text-base sm:text-lg max-w-2xl mx-auto font-medium">
|
|
Real-time stats from the region's premier zero-middlemen domestic helper platform. No recruiters, no hidden commissions, just honest data.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{/* Worker Profiles Card */}
|
|
<div className="bg-slate-950/40 border border-white/10 p-8 rounded-3xl backdrop-blur-md relative overflow-hidden group hover:border-blue-500/30 transition-all flex flex-col justify-between h-64 shadow-xl">
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-2xl group-hover:bg-blue-500/10 transition-colors" />
|
|
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400">
|
|
<Users className="w-6 h-6" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="text-4xl font-extrabold tracking-tight text-white">
|
|
{total_workers.toLocaleString()}+
|
|
</div>
|
|
<div className="text-sm font-semibold text-slate-400 uppercase tracking-wider">
|
|
Worker Profiles
|
|
</div>
|
|
<p className="text-xs text-slate-500 font-medium">
|
|
Active, background-checked domestic workers ready for sponsorship.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Avg Monthly Hires Card */}
|
|
<div className="bg-slate-950/40 border border-white/10 p-8 rounded-3xl backdrop-blur-md relative overflow-hidden group hover:border-emerald-500/30 transition-all flex flex-col justify-between h-64 shadow-xl">
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 rounded-full blur-2xl group-hover:bg-emerald-500/10 transition-colors" />
|
|
<div className="w-12 h-12 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
|
|
<TrendingUp className="w-6 h-6" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="text-4xl font-extrabold tracking-tight text-white">
|
|
{avg_hires.toLocaleString()}+
|
|
</div>
|
|
<div className="text-sm font-semibold text-slate-400 uppercase tracking-wider">
|
|
Avg Monthly Hires
|
|
</div>
|
|
<p className="text-xs text-slate-500 font-medium">
|
|
Average number of successful matches completed directly on our app.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Total Successful Hires */}
|
|
<div className="bg-slate-950/40 border border-white/10 p-8 rounded-3xl backdrop-blur-md relative overflow-hidden group hover:border-purple-500/30 transition-all flex flex-col justify-between h-64 shadow-xl">
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-full blur-2xl group-hover:bg-purple-500/10 transition-colors" />
|
|
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400">
|
|
<CheckCircle2 className="w-6 h-6" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="text-4xl font-extrabold tracking-tight text-white">
|
|
{total_hires_all.toLocaleString()}+
|
|
</div>
|
|
<div className="text-sm font-semibold text-slate-400 uppercase tracking-wider">
|
|
Total Hires Done
|
|
</div>
|
|
<p className="text-xs text-slate-500 font-medium">
|
|
Direct employment contracts signed by registered sponsors in Dubai.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Trust Points */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8 border-t border-white/10">
|
|
<div className="flex items-start space-x-3">
|
|
<Shield className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-bold text-sm text-slate-200">MOHRE Compliant</h4>
|
|
<p className="text-xs text-slate-400 font-medium mt-1">Every direct hire follows official UAE regulations seamlessly.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<Lock className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-bold text-sm text-slate-200">OCR Identity Checks</h4>
|
|
<p className="text-xs text-slate-400 font-medium mt-1">Passports and Emirates IDs are checked using secure AI technology.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<Zap className="w-5 h-5 text-purple-400 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-bold text-sm text-slate-200">Zero Agency Fees</h4>
|
|
<p className="text-xs text-slate-400 font-medium mt-1">Hire direct and save up to AED 15,000 on middleman charges.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Box */}
|
|
<div className="bg-gradient-to-br from-[#185FA5] to-blue-950 rounded-3xl p-8 sm:p-10 border border-blue-800 text-center relative overflow-hidden shadow-2xl space-y-6">
|
|
<div className="absolute -left-10 -bottom-10 w-64 h-64 bg-white/5 rounded-full blur-3xl pointer-events-none" />
|
|
<h2 className="text-2xl sm:text-3xl font-extrabold text-white">Start Direct Hiring Today</h2>
|
|
<p className="text-blue-100 text-sm max-w-xl mx-auto font-medium">
|
|
Join thousands of UAE sponsors who hire nannies, maids, cooks, and drivers directly and securely.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
|
<Link
|
|
href="/employer/register"
|
|
className="w-full sm:w-auto bg-white text-blue-900 hover:bg-slate-100 px-8 py-4 rounded-2xl font-black text-sm transition-all shadow-lg flex items-center justify-center space-x-2 group"
|
|
>
|
|
<span>Get Started Now</span>
|
|
<ArrowRight className="w-4 h-4 text-blue-900 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-white/5 bg-slate-950 py-8 text-center text-xs text-slate-500 font-medium">
|
|
© {new Date().getFullYear()} DirectMarket. All rights reserved. Compliant with UAE MOHRE guidelines.
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|