Merge pull request #24 from MealCraft/feature/magic_link_user_login
added landing page
This commit is contained in:
Jun-te Kim
GitHub
commit
8c15e6be43
2 changed files with 295 additions and 0 deletions
125
stripe_to_invoice/app/landing/page.tsx
Normal file
125
stripe_to_invoice/app/landing/page.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
// 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
170
stripe_to_invoice/app/marketing/page.tsx
Normal file
170
stripe_to_invoice/app/marketing/page.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
||||||
|
// app/checklist/page.tsx
|
||||||
|
|
||||||
|
export default function GoToMarketChecklist() {
|
||||||
|
return (
|
||||||
|
<main className="max-w-3xl mx-auto p-8 space-y-16">
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<section>
|
||||||
|
<h1 className="text-2xl font-semibold">
|
||||||
|
Go-to-Market Checklist (Post-MVP)
|
||||||
|
</h1>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
A step-by-step execution checklist to find the right customers,
|
||||||
|
sell with certainty, and avoid wasted effort.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ICP */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">1. Confirm the target customer (non-negotiable)</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>UK-based business</li>
|
||||||
|
<li>VAT registered</li>
|
||||||
|
<li>Uses Stripe Checkout or Payment Links</li>
|
||||||
|
<li>Uses Xero (or QuickBooks)</li>
|
||||||
|
<li>Wants invoices to exist cleanly in the ledger</li>
|
||||||
|
<li>Billing is one-off, annual, or fixed recurring</li>
|
||||||
|
<li className="text-gray-500">No usage billing, no proration</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
If any of these are false, do not sell to them.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Problem Validation */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">2. Validate pain before pitching</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>Ask: “Do Stripe payouts and Xero invoices always match?”</li>
|
||||||
|
<li>Listen for: manual fixes, journals, spreadsheets, month-end stress</li>
|
||||||
|
<li>Confirm VAT reconciliation is a pain point</li>
|
||||||
|
<li>Confirm a human currently checks or fixes things</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
No visible pain = no sale.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Channels */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">3. Choose acquisition channel (in order)</h2>
|
||||||
|
|
||||||
|
<div className="mt-4 space-y-6">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium">A. Accountants & bookkeepers (primary)</h3>
|
||||||
|
<ul className="mt-2 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>UK-based Xero partners</li>
|
||||||
|
<li>Bookkeepers handling Stripe clients</li>
|
||||||
|
<li>Fractional CFOs</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-1 text-gray-600">
|
||||||
|
Pitch: “Stripe payments → accountant-approved Xero invoices. Automatically.”
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium">B. Reddit & communities (problem-aware)</h3>
|
||||||
|
<ul className="mt-2 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>Search Stripe + Xero reconciliation threads</li>
|
||||||
|
<li>Explain why the problem exists</li>
|
||||||
|
<li>Describe the accounting-first solution</li>
|
||||||
|
<li>Let people DM you</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium">C. Targeted founder outbound</h3>
|
||||||
|
<ul className="mt-2 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>UK agencies</li>
|
||||||
|
<li>B2B SaaS with annual or fixed billing</li>
|
||||||
|
<li>Founder still involved in finance</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Sales Execution */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">4. Close with outcome, not features</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>Do not demo dashboards</li>
|
||||||
|
<li>Do not explain internals</li>
|
||||||
|
<li>Promise: “Next Stripe payment appears as paid in Xero”</li>
|
||||||
|
<li>Charge £200/month immediately</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
If they want a free trial, they are not the customer.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Delivery */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">5. Deliver proof immediately</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>Connect Stripe</li>
|
||||||
|
<li>Connect Xero</li>
|
||||||
|
<li>Trigger a real payment</li>
|
||||||
|
<li>Show paid invoice in Xero</li>
|
||||||
|
<li>Send screenshot or reconciliation summary</li>
|
||||||
|
</ul>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
The product is the outcome.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Objections */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">6. Capture objections and edge cases</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>Ask: “What would make this risky?”</li>
|
||||||
|
<li>Ask: “What would your accountant question?”</li>
|
||||||
|
<li>Log every concern verbatim</li>
|
||||||
|
<li>Turn repeated concerns into rules or exclusions</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Narrow */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">7. Narrow the ICP aggressively</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>Remove customers that add complexity</li>
|
||||||
|
<li>Publish exclusions clearly</li>
|
||||||
|
<li>Optimise for repeatability, not volume</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Scale */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">8. Scale only what already works</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>Automate manual steps you’ve repeated 10×</li>
|
||||||
|
<li>Build exception handling before new features</li>
|
||||||
|
<li>Add period close + human sign-off</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Scoreboard */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-xl font-medium">9. Weekly scoreboard</h2>
|
||||||
|
<ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
|
||||||
|
<li>New paid conversations</li>
|
||||||
|
<li>Time to first reconciled payment</li>
|
||||||
|
<li>Monthly churn</li>
|
||||||
|
<li>Unresolved exceptions</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Close */}
|
||||||
|
<section className="pt-8 border-t">
|
||||||
|
<p className="text-gray-500 text-sm">
|
||||||
|
If this business fails, it will not be because the software didn’t work.
|
||||||
|
It will be because the wrong customers were targeted or certainty wasn’t proven.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue