98 lines
4.8 KiB
JavaScript
98 lines
4.8 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
|
|
import { Check, ShieldCheck, Zap, Star, Trophy } from 'lucide-react';
|
|
|
|
export default function EmployerSubscription() {
|
|
const plans = [
|
|
{
|
|
id: 'basic',
|
|
name: 'Basic Search',
|
|
price: '99',
|
|
icon: Zap,
|
|
color: 'bg-slate-50 text-slate-400',
|
|
features: ['Browse 500+ workers', 'Shortlist up to 10', 'Email support']
|
|
},
|
|
{
|
|
id: 'premium',
|
|
name: 'Premium Pass',
|
|
price: '199',
|
|
icon: Star,
|
|
color: 'bg-blue-50 text-blue-600',
|
|
popular: true,
|
|
features: ['Unlimited shortlisting', 'Direct messaging', 'Priority profile view', '24/7 Support']
|
|
},
|
|
{
|
|
id: 'vip',
|
|
name: 'VIP Concierge',
|
|
price: '499',
|
|
icon: Trophy,
|
|
color: 'bg-amber-50 text-amber-500',
|
|
features: ['Assigned manager', 'Medical guarantee', 'Replacement warranty', 'Legal assistance']
|
|
},
|
|
];
|
|
|
|
return (
|
|
<EmployerMobileLayout>
|
|
<Head title="Subscription" />
|
|
|
|
<div className="p-6 space-y-8">
|
|
{/* Header */}
|
|
<div className="text-center space-y-2 py-4">
|
|
<h1 className="text-2xl font-bold tracking-tight">Choose Your Plan</h1>
|
|
<p className="text-sm text-slate-500 font-medium max-w-[250px] mx-auto">Select a package that fits your hiring needs.</p>
|
|
</div>
|
|
|
|
{/* Plan Cards Stacked */}
|
|
<div className="space-y-6 pb-20">
|
|
{plans.map((plan) => (
|
|
<div key={plan.id} className={`bg-white rounded-[32px] p-8 border shadow-sm relative overflow-hidden transition-all active:scale-[0.98] ${
|
|
plan.popular ? 'border-[#141B34] border-2 shadow-xl' : 'border-slate-100'
|
|
}`}>
|
|
{plan.popular && (
|
|
<div className="absolute top-0 right-0 bg-[#141B34] text-white px-6 py-1.5 rounded-bl-2xl text-[9px] font-black uppercase tracking-widest">
|
|
Most Popular
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center ${plan.color}`}>
|
|
<plan.icon className="w-7 h-7" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h3 className="text-lg font-bold">{plan.name}</h3>
|
|
<div className="flex items-baseline space-x-1">
|
|
<span className="text-2xl font-black text-slate-900">{plan.price}</span>
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">AED / Mo</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{plan.features.map((feature, i) => (
|
|
<div key={i} className="flex items-center space-x-3">
|
|
<div className="w-5 h-5 rounded-full bg-emerald-50 flex items-center justify-center">
|
|
<Check className="w-3 h-3 text-emerald-500" strokeWidth={3} />
|
|
</div>
|
|
<span className="text-xs text-slate-600 font-medium">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button className={`w-full py-4 rounded-2xl font-bold text-sm uppercase tracking-widest transition-all ${
|
|
plan.popular
|
|
? 'bg-[#141B34] text-white shadow-lg'
|
|
: 'bg-slate-50 text-slate-900 hover:bg-slate-100'
|
|
}`}>
|
|
Select {plan.name}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</EmployerMobileLayout>
|
|
);
|
|
}
|