justin/provenance
1
0
Fork 0
Code Issues 173 Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign the frontend: real type, hero landing, depth

Browse Source 
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>
This commit is contained in:
Justin Paul
2026-06-06 21:34:47 -04:00
parent fc4cb0273e
commit 3a14fcc4ca
6 changed files with 131 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/layout.tsx
+29 -12
View File
@@ -1,38 +1,55 @@
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",
description: "Where it came from matters — family and land, every fact sourced.",
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">
<body className="flex min-h-screen flex-col">
<header className="border-b border-[var(--border)]">
<div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
<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 gap-5 text-sm">
<Link href="/trees" className="text-[var(--muted)] transition-colors hover:text-bronze">
<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="text-[var(--muted)] transition-colors hover:text-bronze">
<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-3xl flex-1 px-4 py-10">{children}</main>
<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 max-w-3xl px-4 py-6 text-sm italic text-[var(--muted)]">
where it came from matters
<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>