50 lines
2.2 KiB
JavaScript
50 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import { KeyRound } from 'lucide-react';
|
|
|
|
export default function ForgotPassword() {
|
|
return (
|
|
<div className="min-h-screen flex flex-col justify-center items-center px-4 bg-slate-50 font-sans">
|
|
<Head title="Reset Password - Employer Portal" />
|
|
|
|
<div className="w-full max-w-md bg-white rounded-2xl shadow-sm border border-slate-200 p-8 text-center space-y-6">
|
|
<div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto border border-blue-200">
|
|
<KeyRound className="w-8 h-8 text-[#185FA5]" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Forgot Password</h1>
|
|
<p className="text-sm text-gray-600">
|
|
Enter your registration email address and we'll send you a password reset link.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 text-left">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Email Address</label>
|
|
<input
|
|
type="email"
|
|
placeholder="employer@example.com"
|
|
className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5]"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
className="w-full bg-[#185FA5] hover:bg-[#0C447C] text-white rounded-xl h-11 font-semibold text-sm transition-colors shadow-sm"
|
|
>
|
|
Send Reset Link
|
|
</button>
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<Link href="/employer/login" className="text-xs text-[#185FA5] font-bold hover:underline">
|
|
Return to Sign in
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|