125 lines
4.2 KiB
TypeScript
125 lines
4.2 KiB
TypeScript
// app/page.tsx
|
||
|
||
export default function Home() {
|
||
return (
|
||
<main className="max-w-3xl mx-auto p-8 space-y-14">
|
||
|
||
{/* Hero */}
|
||
<section>
|
||
<h1 className="text-3xl font-semibold tracking-tight">
|
||
Stripe → Xero, done properly
|
||
</h1>
|
||
<p className="mt-4 text-lg text-gray-700">
|
||
Automatically turn Stripe payments into paid Xero invoices —
|
||
with VAT correctness and accountant sign-off in mind.
|
||
</p>
|
||
<p className="mt-2 text-gray-600">
|
||
No journals. No spreadsheets. No month-end fixing.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Who it's for */}
|
||
<section>
|
||
<h2 className="text-xl font-medium">Who this is for</h2>
|
||
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||
<li>UK businesses</li>
|
||
<li>VAT registered</li>
|
||
<li>Using Stripe Checkout or Payment Links</li>
|
||
<li>Using Xero</li>
|
||
<li>Billing is one-off, annual, or fixed recurring</li>
|
||
</ul>
|
||
<p className="mt-2 text-gray-600">
|
||
If you rely on usage billing or proration, this is not a fit.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Problem */}
|
||
<section>
|
||
<h2 className="text-xl font-medium">The problem</h2>
|
||
<p className="mt-2 text-gray-700">
|
||
Stripe is excellent at taking payments.
|
||
Xero is required for accounting and VAT.
|
||
</p>
|
||
<p className="mt-2 text-gray-700">
|
||
The gap between them is usually filled with manual journals,
|
||
spreadsheets, and “we’ll fix it at month-end”.
|
||
</p>
|
||
<p className="mt-2 text-gray-600">
|
||
That works — until it doesn’t.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Solution */}
|
||
<section>
|
||
<h2 className="text-xl font-medium">The solution</h2>
|
||
<p className="mt-2 text-gray-700">
|
||
This system makes Xero the invoice-of-record and treats Stripe
|
||
purely as payment execution.
|
||
</p>
|
||
<p className="mt-2 text-gray-700">
|
||
When a Stripe payment succeeds, a matching invoice appears in Xero
|
||
and is automatically marked as paid.
|
||
</p>
|
||
<p className="mt-2 text-gray-600">
|
||
Refunds become credit notes. Fees are handled separately.
|
||
Everything is explainable.
|
||
</p>
|
||
</section>
|
||
|
||
{/* How it works */}
|
||
<section>
|
||
<h2 className="text-xl font-medium">How it works</h2>
|
||
<ol className="mt-4 space-y-2 list-decimal list-inside text-gray-700">
|
||
<li>Connect Stripe</li>
|
||
<li>Connect Xero</li>
|
||
<li>A real payment is made</li>
|
||
<li>An invoice appears in Xero as paid</li>
|
||
<li>Month-end reconciliation just works</li>
|
||
</ol>
|
||
</section>
|
||
|
||
{/* Why it's different */}
|
||
<section>
|
||
<h2 className="text-xl font-medium">Why this is different</h2>
|
||
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||
<li>Xero remains the legal source of truth</li>
|
||
<li>Invoices are immutable once issued</li>
|
||
<li>Edge cases are logged, not hidden</li>
|
||
<li>Humans approve exceptions and month-end</li>
|
||
</ul>
|
||
<p className="mt-2 text-gray-600">
|
||
This is a financial control, not a data sync.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Pricing */}
|
||
<section>
|
||
<h2 className="text-xl font-medium">Pricing</h2>
|
||
<p className="mt-2 text-gray-700">
|
||
£200 per month.
|
||
</p>
|
||
<p className="mt-1 text-gray-600">
|
||
Unlimited invoices. No per-transaction fees.
|
||
</p>
|
||
<p className="mt-2 text-gray-600">
|
||
Costs less than fixing Stripe in Xero manually.
|
||
</p>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<section className="pt-8 border-t">
|
||
<p className="text-gray-700">
|
||
If Stripe and Xero already match perfectly for you,
|
||
you don’t need this.
|
||
</p>
|
||
<p className="mt-2 text-gray-700">
|
||
If someone fixes them every month, you probably do.
|
||
</p>
|
||
<p className="mt-4 text-sm text-gray-500">
|
||
This page is intentionally simple. The proof is your next payment.
|
||
</p>
|
||
</section>
|
||
|
||
</main>
|
||
)
|
||
}
|