soconnor
0e46fdafb2
- Implemented `AdministrationContent` component for managing account roles. - Created `AdministrationPage` to serve as the main entry point for administration tasks. - Added PDF preview functionality with `PdfPreviewFrame` component for invoice generation. - Introduced `InputColor` component for advanced color selection with various formats. - Established color conversion utilities in `color-converter.ts` for handling color formats. - Defined appearance-related schemas and types in `appearance.ts` for consistent theme management.
109 lines
4.2 KiB
TypeScript
109 lines
4.2 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowRight, FileText, UserRound } from "lucide-react";
|
|
import { AuthRedirect } from "~/components/AuthRedirect";
|
|
import { Logo } from "~/components/branding/logo";
|
|
import { Button } from "~/components/ui/button";
|
|
import { env } from "~/env";
|
|
import { brand } from "~/lib/branding";
|
|
|
|
export default function HomePage() {
|
|
const allowRegistration = env.DISABLE_SIGNUPS !== true;
|
|
|
|
return (
|
|
<main className="bg-background text-foreground min-h-screen">
|
|
<AuthRedirect />
|
|
|
|
<div className="mx-auto flex min-h-screen w-full max-w-5xl flex-col px-5 py-5 sm:px-6 lg:px-8">
|
|
<header className="flex items-center justify-between gap-4 border-b py-4">
|
|
<Logo animated={false} />
|
|
<nav className="flex items-center gap-2">
|
|
<Link href="/auth/signin">
|
|
<Button variant="ghost" size="sm">
|
|
Sign in
|
|
</Button>
|
|
</Link>
|
|
{allowRegistration && (
|
|
<Link href="/auth/register">
|
|
<Button size="sm">Create account</Button>
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
</header>
|
|
|
|
<section className="grid flex-1 items-center gap-10 py-14 md:grid-cols-[1fr_320px] md:py-20">
|
|
<div className="max-w-2xl space-y-7">
|
|
<div className="space-y-4">
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Personal invoicing
|
|
</p>
|
|
<h1 className="font-heading text-4xl leading-tight font-bold tracking-normal sm:text-5xl">
|
|
{brand.name} is a place to make and track invoices.
|
|
</h1>
|
|
<p className="text-muted-foreground max-w-xl text-base leading-7 sm:text-lg">
|
|
Built for one person managing real clients, real work, and the
|
|
small admin loop around getting paid.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<Link href="/auth/signin">
|
|
<Button size="lg" className="h-11 px-5">
|
|
Open workspace
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
{allowRegistration && (
|
|
<Link href="/auth/register">
|
|
<Button variant="outline" size="lg" className="h-11 px-5">
|
|
Create account
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-border bg-card text-card-foreground rounded-xl border p-5 shadow-sm">
|
|
<div className="space-y-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="bg-primary/10 text-primary rounded-md p-2">
|
|
<UserRound className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-sm font-semibold">Clients</h2>
|
|
<p className="text-muted-foreground mt-1 text-sm leading-6">
|
|
Keep the people and businesses you invoice in one place.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3 border-t pt-5">
|
|
<div className="bg-primary/10 text-primary rounded-md p-2">
|
|
<FileText className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-sm font-semibold">Invoices</h2>
|
|
<p className="text-muted-foreground mt-1 text-sm leading-6">
|
|
Draft, send, mark paid, and export the PDF when you need it.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer className="text-muted-foreground flex flex-col gap-3 border-t py-5 text-sm sm:flex-row sm:items-center sm:justify-between">
|
|
<span>© 2026 {brand.name}</span>
|
|
<div className="flex gap-5">
|
|
<Link href="/privacy" className="hover:text-foreground">
|
|
Privacy
|
|
</Link>
|
|
<Link href="/terms" className="hover:text-foreground">
|
|
Terms
|
|
</Link>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|