stlyes fixes
This commit is contained in:
@@ -52,68 +52,68 @@ export default function Payment() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-50 px-4 py-16">
|
||||
<div className="w-full max-w-3xl bg-white rounded-2xl shadow-lg p-8 space-y-6 border border-slate-100">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-16">
|
||||
<div className="w-full max-w-3xl bg-white rounded-2xl shadow-lg p-8 space-y-6 border border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">Confirm your plan</p>
|
||||
<h1 className="text-2xl font-semibold text-slate-900">Complete your subscription</h1>
|
||||
<p className="text-sm text-gray-500">Confirm your plan</p>
|
||||
<h1 className="text-2xl font-semibold text-gray-900">Complete your subscription</h1>
|
||||
</div>
|
||||
<Link to="/pricing" className="text-sm text-blue-600 hover:text-blue-700">
|
||||
<Link to="/pricing" className="text-sm text-brand-600 hover:text-brand-700">
|
||||
Change plan
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{plan && (
|
||||
<div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900">{plan.name}</h2>
|
||||
<p className="text-slate-700">{plan.price}</p>
|
||||
<p className="text-sm text-slate-600">{plan.content}</p>
|
||||
<p className="text-xs text-amber-700 mt-2">
|
||||
<div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900">{plan.name}</h2>
|
||||
<p className="text-gray-700">{plan.price}</p>
|
||||
<p className="text-sm text-gray-600">{plan.content}</p>
|
||||
<p className="text-xs text-warning-700 mt-2">
|
||||
Payment is completed offline (bank transfer). Submit your email and reference below; we will verify and activate your account.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-medium text-slate-800">
|
||||
<label className="block text-sm font-medium text-gray-800">
|
||||
Contact email
|
||||
<input
|
||||
type="email"
|
||||
value={contactEmail}
|
||||
onChange={(e) => setContactEmail(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 focus:border-blue-500 focus:outline-none"
|
||||
className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-slate-800">
|
||||
<label className="block text-sm font-medium text-gray-800">
|
||||
Notes (optional)
|
||||
<textarea
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
placeholder="Company name, billing contact, or questions"
|
||||
className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 focus:border-blue-500 focus:outline-none"
|
||||
className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none"
|
||||
rows={3}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/signup" className="text-sm text-slate-600 hover:text-slate-800">
|
||||
<Link to="/signup" className="text-sm text-gray-600 hover:text-gray-800">
|
||||
Prefer the free plan? Start your trial
|
||||
</Link>
|
||||
<a
|
||||
href={mailtoHref || "#"}
|
||||
onClick={handleRequest}
|
||||
className={`inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold text-white ${
|
||||
contactEmail.trim() ? "bg-blue-600 hover:bg-blue-700" : "bg-blue-400 cursor-not-allowed"
|
||||
contactEmail.trim() ? "bg-brand-600 hover:bg-brand-700" : "bg-brand-400 cursor-not-allowed"
|
||||
}`}
|
||||
aria-disabled={!contactEmail.trim()}
|
||||
>
|
||||
Request payment instructions
|
||||
</a>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
{error && <p className="text-sm text-error-600">{error}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user