justin
3a14fcc4ca
Lifts the UI from wireframe to a finished heritage look: Fraunces (display serif) + Inter (sans) via next/font; a proper hero landing with a feature triad and the Origin mark; a warm bronze-tinted background gradient for depth; a sticky branded header and refined footer. Polished button (sizes + bronze focus ring + shadow), card (rounded-xl, soft layered shadow), and input (bronze focus) primitives that carry across every page. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Fraunces, Inter } from "next/font/google";
|
|
import Link from "next/link";
|
|
|
|
import "./globals.css";
|
|
|
|
// Heritage display serif + clean humanist sans (per docs/brand typography).
|
|
const serif = Fraunces({
|
|
subsets: ["latin"],
|
|
variable: "--font-fraunces",
|
|
display: "swap",
|
|
axes: ["opsz"],
|
|
});
|
|
const sans = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Provenance — where it came from matters",
|
|
description:
|
|
"Trace your family and your land in one place — every fact linked to the record it came from. Self-hosted, sourced, and yours to keep.",
|
|
icons: { icon: "/favicon.svg" },
|
|
};
|
|
|
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" className={`${serif.variable} ${sans.variable}`}>
|
|
<body className="flex min-h-screen flex-col antialiased">
|
|
<header className="sticky top-0 z-20 border-b border-[var(--border)] bg-[var(--background)]">
|
|
<div className="mx-auto flex max-w-5xl items-center justify-between px-5 py-3.5">
|
|
<Link href="/" className="flex items-center" aria-label="Provenance — home">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/provenance-logo-plain.svg" alt="Provenance" className="h-7 w-auto" />
|
|
</Link>
|
|
<nav className="flex items-center gap-6 text-sm">
|
|
<Link href="/trees" className="text-[var(--muted)] transition-colors hover:text-[var(--foreground)]">
|
|
Trees
|
|
</Link>
|
|
<Link
|
|
href="/login"
|
|
className="rounded-full border border-[var(--border)] px-4 py-1.5 font-medium transition-colors hover:border-bronze hover:text-bronze"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto w-full max-w-5xl flex-1 px-5 py-10">{children}</main>
|
|
|
|
<footer className="border-t border-[var(--border)]">
|
|
<div className="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-2 px-5 py-6 text-sm text-[var(--muted)]">
|
|
<span className="font-serif text-base italic">where it came from matters</span>
|
|
<span>Self-hosted · source-available · your data, your infrastructure</span>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|