126 lines
6.3 KiB
TypeScript
126 lines
6.3 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export default function XeroSuccessPage() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-sm border-b border-slate-200">
|
|
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center">
|
|
<div className="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
|
|
S2X
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="pt-20">
|
|
<div className="max-w-2xl mx-auto px-6 py-16">
|
|
{/* Success Animation */}
|
|
<div className="text-center mb-12">
|
|
<div className="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full mb-6 animate-bounce">
|
|
<svg className="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 className="text-4xl font-bold text-slate-900 mb-3">
|
|
All set! 🚀
|
|
</h1>
|
|
|
|
<p className="text-lg text-slate-600">
|
|
Your Xero organisation is now securely linked. We can now automatically create invoices and mark them as paid when Stripe payments succeed.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Progress Card */}
|
|
<div className="bg-white border border-slate-200 rounded-xl shadow-sm p-8 mb-8">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-6">Setup complete</h2>
|
|
|
|
<div className="space-y-4">
|
|
{/* Step 1 - Login */}
|
|
<div className="flex gap-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-10 h-10 rounded-full bg-green-100 border-2 border-green-600 flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="w-0.5 h-8 bg-green-200 my-1"></div>
|
|
</div>
|
|
<div className="pt-1">
|
|
<p className="font-semibold text-slate-900">Email verified</p>
|
|
<p className="text-sm text-slate-600">Authentication complete</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 2 - Stripe */}
|
|
<div className="flex gap-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-10 h-10 rounded-full bg-green-100 border-2 border-green-600 flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="w-0.5 h-8 bg-green-200 my-1"></div>
|
|
</div>
|
|
<div className="pt-1">
|
|
<p className="font-semibold text-slate-900">Stripe connected</p>
|
|
<p className="text-sm text-slate-600">Payment monitoring active</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 3 - Xero */}
|
|
<div className="flex gap-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-10 h-10 rounded-full bg-green-100 border-2 border-green-600 flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="pt-1">
|
|
<p className="font-semibold text-slate-900">Xero connected</p>
|
|
<p className="text-sm text-slate-600">Invoice automation enabled</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* What's next */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-8 mb-8">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">What happens now</h2>
|
|
<ul className="space-y-3">
|
|
<li className="flex gap-3">
|
|
<span className="text-blue-600 font-bold text-lg">✓</span>
|
|
<span className="text-slate-700">Configure your Xero account codes in the dashboard</span>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="text-blue-600 font-bold text-lg">✓</span>
|
|
<span className="text-slate-700">Make a test Stripe payment to verify everything works</span>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="text-blue-600 font-bold text-lg">✓</span>
|
|
<span className="text-slate-700">Watch as invoices automatically appear in Xero</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-8">
|
|
<h2 className="text-xl font-semibold text-slate-900 mb-3">
|
|
Go to your dashboard
|
|
</h2>
|
|
<p className="text-slate-700 mb-6">
|
|
Configure your account codes and start using the automation.
|
|
</p>
|
|
<Link
|
|
href="/dashboard"
|
|
className="inline-block px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:shadow-lg hover:from-green-700 hover:to-green-800 transition"
|
|
>
|
|
Open dashboard →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|