238 lines
12 KiB
TypeScript
238 lines
12 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { SiteFooter } from "../components/site-footer";
|
|
import { SiteHeader } from "../components/site-header";
|
|
import { PageSchema } from "../components/page-schema";
|
|
import { GrowthSimulator } from "../components/growth-simulator";
|
|
import { siteInfo } from "../data/site";
|
|
|
|
export const metadata = {
|
|
title: "LedgerOne - The Financial Control Platform for Modern Business",
|
|
description: "Connect all your accounts, automate your bookkeeping, and get audit-ready financials in real-time.",
|
|
keywords: siteInfo.keywords
|
|
};
|
|
|
|
export default function LandingPage() {
|
|
const schema = [
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
name: "LedgerOne",
|
|
url: siteInfo.url,
|
|
potentialAction: {
|
|
"@type": "SearchAction",
|
|
target: `${siteInfo.url}/search?q={search_term_string}`,
|
|
"query-input": "required name=search_term_string"
|
|
}
|
|
},
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
name: "LedgerOne",
|
|
url: siteInfo.url,
|
|
logo: `${siteInfo.url}/logo.png`,
|
|
sameAs: [
|
|
"https://twitter.com/ledgerone",
|
|
"https://linkedin.com/company/ledgerone"
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background font-sans text-foreground flex flex-col">
|
|
<SiteHeader />
|
|
|
|
<main className="flex-1">
|
|
{/* Hero Section - Monarch Style Clean Split */}
|
|
<section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
|
<div className="absolute inset-0 mesh-gradient -z-10 opacity-30" />
|
|
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
|
|
{/* Left Column: Copy */}
|
|
<div className="max-w-2xl animate-slide-up">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/50 border border-border text-xs font-medium text-muted-foreground backdrop-blur-sm mb-8">
|
|
<span className="flex h-2 w-2 rounded-full bg-primary"></span>
|
|
Now available for US & Canadian businesses
|
|
</div>
|
|
<h1 className="text-5xl font-bold tracking-tight text-foreground sm:text-7xl mb-6 leading-tight">
|
|
Master your money <br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">
|
|
with total clarity.
|
|
</span>
|
|
</h1>
|
|
<p className="mt-6 text-lg text-muted-foreground mb-10">
|
|
LedgerOne connects all your financial accounts in one place. Automate bookkeeping, track cash flow, and stay audit-ready without the spreadsheet chaos.
|
|
</p>
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<Link
|
|
href="/register"
|
|
className="rounded-full bg-primary px-8 py-4 text-base font-bold text-primary-foreground shadow-lg shadow-primary/25 hover:bg-primary/90 hover:-translate-y-1 transition-all"
|
|
>
|
|
Start your free trial
|
|
</Link>
|
|
<Link
|
|
href="/demo"
|
|
className="rounded-full bg-background border border-border px-8 py-4 text-base font-semibold text-foreground hover:bg-secondary transition-colors"
|
|
>
|
|
See how it works
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Composed Media Stack */}
|
|
<div className="relative h-[600px] w-full flex items-center justify-center animate-fade-in delay-200">
|
|
{/* 1. Base Layer: Video (Desktop View) */}
|
|
<div className="absolute top-0 right-0 w-[90%] h-[80%] rounded-2xl overflow-hidden border border-border shadow-2xl bg-background/50 backdrop-blur-xl z-10">
|
|
<video
|
|
poster="/images/hero_celebration_video_poster_1769386269277.png"
|
|
className="w-full h-full object-cover opacity-80"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
>
|
|
<source src="/videos/hero.mp4" type="video/mp4" />
|
|
</video>
|
|
{/* Overlay Gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent"></div>
|
|
</div>
|
|
|
|
{/* 2. Middle Layer: Interactive Simulator (Floating Card) */}
|
|
<div className="absolute bottom-10 right-10 w-[320px] z-20 hidden xl:block">
|
|
<div className="bg-background/80 backdrop-blur-md border border-border rounded-2xl p-1 shadow-glass transform hover:scale-105 transition-transform duration-500">
|
|
<GrowthSimulator />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Social Proof */}
|
|
<section className="py-12 border-y border-border bg-secondary/20">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
|
|
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-8">
|
|
Trusted by forward-thinking finance teams
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-8 md:grid-cols-5 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
|
|
{/* Placeholders for logos */}
|
|
<div className="flex items-center justify-center font-bold text-xl">Acme Corp</div>
|
|
<div className="flex items-center justify-center font-bold text-xl">GlobalTech</div>
|
|
<div className="flex items-center justify-center font-bold text-xl">Nebula</div>
|
|
<div className="flex items-center justify-center font-bold text-xl">Vertex</div>
|
|
<div className="flex items-center justify-center font-bold text-xl">Horizon</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feature Grid */}
|
|
<section className="py-24 lg:py-32">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-20">
|
|
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
|
Everything you need to manage your wealth.
|
|
</h2>
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
|
Stop logging into ten different sites. LedgerOne brings your entire financial life into a single, secure, and beautiful view.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-12 lg:grid-cols-3">
|
|
{/* Feature 1: Connect */}
|
|
<div className="glass-panel rounded-3xl p-8 hover:border-primary/50 transition-colors group">
|
|
<div className="h-12 w-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-foreground mb-3">Sync Everything</h3>
|
|
<p className="text-muted-foreground mb-6">
|
|
Connect over 11,000 financial institutions. Banks, credit cards, loans, and investments update automatically.
|
|
</p>
|
|
<div className="rounded-xl overflow-hidden border border-border shadow-sm">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=1470&auto=format&fit=crop"
|
|
alt="Bank connections"
|
|
width={400}
|
|
height={250}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feature 2: Visualize */}
|
|
<div className="glass-panel rounded-3xl p-8 hover:border-primary/50 transition-colors group">
|
|
<div className="h-12 w-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-foreground mb-3">Visualize Cash Flow</h3>
|
|
<p className="text-muted-foreground mb-6">
|
|
See exactly where your money goes. Track income vs expenses with beautiful, interactive charts.
|
|
</p>
|
|
<div className="rounded-xl overflow-hidden border border-border shadow-sm">
|
|
<Image
|
|
src="/images/feature-cashflow.png"
|
|
alt="Cash flow chart"
|
|
width={400}
|
|
height={250}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feature 3: Report */}
|
|
<div className="glass-panel rounded-3xl p-8 hover:border-primary/50 transition-colors group">
|
|
<div className="h-12 w-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-foreground mb-3">Custom Reports</h3>
|
|
<p className="text-muted-foreground mb-6">
|
|
Build the exact report you need. Filter by category, tag, or merchant and export to CSV for your accountant.
|
|
</p>
|
|
<div className="rounded-xl overflow-hidden border border-border shadow-sm">
|
|
<Image
|
|
src="/images/feature-reports.png"
|
|
alt="Report builder"
|
|
width={400}
|
|
height={250}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-24 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-primary/5 -z-10" />
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
|
|
<h2 className="text-4xl font-bold tracking-tight text-foreground mb-6">
|
|
Ready to take control?
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground mb-10">
|
|
Join thousands of business owners who trust LedgerOne for their financial clarity.
|
|
</p>
|
|
<Link
|
|
href="/register"
|
|
className="inline-block rounded-full bg-primary px-10 py-4 text-lg font-bold text-primary-foreground shadow-xl shadow-primary/30 hover:bg-primary/90 hover:-translate-y-1 transition-all"
|
|
>
|
|
Start your 14-day free trial
|
|
</Link>
|
|
<p className="mt-4 text-sm text-muted-foreground">
|
|
No credit card required. Cancel anytime.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<SiteFooter />
|
|
<PageSchema schema={schema} />
|
|
</div>
|
|
);
|
|
}
|