288 lines
14 KiB
TypeScript
288 lines
14 KiB
TypeScript
import { cookies } from "next/headers";
|
|
import { redirect } from "next/navigation";
|
|
|
|
export default async function Home() {
|
|
const cookieStore = await cookies();
|
|
const session = cookieStore.get("session");
|
|
|
|
if (session) {
|
|
redirect("/app");
|
|
}
|
|
|
|
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 justify-between">
|
|
<div className="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
|
|
S2X
|
|
</div>
|
|
<a
|
|
href="/login"
|
|
className="px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-900 transition"
|
|
>
|
|
Log in
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="pt-20">
|
|
{/* Hero Section */}
|
|
<section className="max-w-5xl mx-auto px-6 py-20 sm:py-32 text-center">
|
|
<div className="inline-flex items-center gap-2 mb-6 px-3 py-1 bg-blue-50 rounded-full border border-blue-200">
|
|
<span className="w-2 h-2 bg-blue-600 rounded-full"></span>
|
|
<span className="text-sm font-medium text-blue-700">Automate your invoicing</span>
|
|
</div>
|
|
|
|
<h1 className="text-5xl sm:text-6xl font-bold tracking-tight text-slate-900 mb-6">
|
|
Stripe payments,
|
|
<br />
|
|
<span className="bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
|
|
Xero invoices
|
|
</span>
|
|
{" "}automatically
|
|
</h1>
|
|
|
|
<p className="text-xl text-slate-600 max-w-2xl mx-auto mb-8 leading-relaxed">
|
|
Stop manually creating invoices. When a Stripe payment succeeds, a Xero invoice is instantly created and marked as paid—with proper VAT handling and accountant-approved accuracy.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
|
<a
|
|
href="/login"
|
|
className="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:shadow-lg hover:from-blue-700 hover:to-blue-800 transition transform hover:scale-105"
|
|
>
|
|
Get started →
|
|
</a>
|
|
<a
|
|
href="#how-it-works"
|
|
className="px-8 py-3 bg-white border border-slate-300 text-slate-700 font-semibold rounded-lg hover:bg-slate-50 transition"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</div>
|
|
|
|
{/* Trust badges */}
|
|
<div className="flex flex-wrap justify-center gap-8 text-sm text-slate-600">
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-green-500" 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>
|
|
<span>No manual work</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-green-500" 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>
|
|
<span>VAT compliant</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-green-500" 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>
|
|
<span>Audit ready</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section id="how-it-works" className="max-w-5xl mx-auto px-6 py-20 border-t border-slate-200">
|
|
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
|
|
How it works
|
|
</h2>
|
|
<p className="text-center text-slate-600 mb-12 max-w-2xl mx-auto">
|
|
Three simple connections, then automation takes over
|
|
</p>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6 mb-12">
|
|
{/* Step 1 */}
|
|
<div className="bg-white border border-slate-200 rounded-xl p-6 hover:shadow-lg transition">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-2xl font-bold text-blue-600">1</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-2">Connect Stripe</h3>
|
|
<p className="text-slate-600">
|
|
Link your Stripe account to start monitoring payments in real-time.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Step 2 */}
|
|
<div className="bg-white border border-slate-200 rounded-xl p-6 hover:shadow-lg transition">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-2xl font-bold text-blue-600">2</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-2">Connect Xero</h3>
|
|
<p className="text-slate-600">
|
|
Authorize access to your Xero account for invoice creation.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Step 3 */}
|
|
<div className="bg-white border border-slate-200 rounded-xl p-6 hover:shadow-lg transition">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-2xl font-bold text-blue-600">3</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-2">Done</h3>
|
|
<p className="text-slate-600">
|
|
Relax as payments automatically become invoices in Xero.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Benefits Grid */}
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
|
|
<h4 className="font-semibold text-slate-900 mb-2">🎯 Zero manual work</h4>
|
|
<p className="text-slate-700">
|
|
No more spreadsheets, journals, or month-end fixing. Invoices appear instantly and correctly.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-green-200">
|
|
<h4 className="font-semibold text-slate-900 mb-2">✓ Accounting ready</h4>
|
|
<p className="text-slate-700">
|
|
VAT compliance built-in. Your accountant will love the audit trail.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200">
|
|
<h4 className="font-semibold text-slate-900 mb-2">⚡ Instant & reliable</h4>
|
|
<p className="text-slate-700">
|
|
Invoices created within seconds of payment. Refunds become credit notes automatically.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl p-6 border border-amber-200">
|
|
<h4 className="font-semibold text-slate-900 mb-2">🔒 Xero is the source</h4>
|
|
<p className="text-slate-700">
|
|
Your invoices remain immutable in Xero. Stripe is purely payment execution.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Perfect for section */}
|
|
<section className="max-w-5xl mx-auto px-6 py-20 border-t border-slate-200">
|
|
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
|
|
Who this is for
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 className="font-semibold text-slate-900 mb-4">✓ Perfect fit:</h3>
|
|
<ul className="space-y-2">
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-green-500">→</span>
|
|
<span>UK businesses using Stripe & Xero</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-green-500">→</span>
|
|
<span>VAT registered</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-green-500">→</span>
|
|
<span>One-off, annual, or fixed recurring billing</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-green-500">→</span>
|
|
<span>Invoices are currently manually created</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-semibold text-slate-900 mb-4">✗ Not a fit:</h3>
|
|
<ul className="space-y-2">
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-slate-400">→</span>
|
|
<span>Usage-based or metered billing</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-slate-400">→</span>
|
|
<span>Proration or complex billing logic</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-slate-400">→</span>
|
|
<span>Already fully automated elsewhere</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<span className="text-slate-400">→</span>
|
|
<span>Non-UK businesses</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing Section */}
|
|
<section className="max-w-5xl mx-auto px-6 py-20 border-t border-slate-200">
|
|
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
|
|
Simple pricing
|
|
</h2>
|
|
<p className="text-center text-slate-600 mb-12">
|
|
No hidden fees. No per-transaction costs.
|
|
</p>
|
|
|
|
<div className="max-w-md mx-auto bg-gradient-to-br from-slate-50 to-slate-100 border-2 border-blue-600 rounded-2xl p-8 text-center">
|
|
<h3 className="text-4xl font-bold text-slate-900 mb-2">£200</h3>
|
|
<p className="text-slate-600 mb-6">per month</p>
|
|
<ul className="space-y-3 text-left mb-8">
|
|
<li className="flex gap-3 text-slate-700">
|
|
<svg className="w-5 h-5 text-green-500 flex-shrink-0" 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>
|
|
<span>Unlimited invoices</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<svg className="w-5 h-5 text-green-500 flex-shrink-0" 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>
|
|
<span>No per-transaction fees</span>
|
|
</li>
|
|
<li className="flex gap-3 text-slate-700">
|
|
<svg className="w-5 h-5 text-green-500 flex-shrink-0" 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>
|
|
<span>Full VAT handling</span>
|
|
</li>
|
|
</ul>
|
|
<p className="text-sm text-slate-600 mb-6 pb-6 border-b border-slate-300">
|
|
Usually saves £1000s per year in manual work and accounting fixes.
|
|
</p>
|
|
<a
|
|
href="/login"
|
|
className="w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:shadow-lg hover:from-blue-700 hover:to-blue-800 transition"
|
|
>
|
|
Start 14-day trial
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="max-w-5xl mx-auto px-6 py-20 border-t border-slate-200">
|
|
<div className="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-12 text-center text-white">
|
|
<h2 className="text-3xl font-bold mb-4">
|
|
Ready to automate?
|
|
</h2>
|
|
<p className="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
|
|
Connect Stripe and Xero, then focus on what matters. Invoicing handles itself.
|
|
</p>
|
|
<a
|
|
href="/login"
|
|
className="inline-block px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-slate-50 transition"
|
|
>
|
|
Get started free →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-slate-200 py-12 mt-20">
|
|
<div className="max-w-5xl mx-auto px-6 text-center text-slate-600 text-sm">
|
|
<p>Building the bridge between Stripe payments and Xero invoicing.</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|