Redesign the frontend: real type, hero landing, depth

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>

frontend/app/page.tsx

@@ -1,27 +1,77 @@
+import { BadgeCheck, MapPin, ShieldCheck, Users } from "lucide-react";
 import Link from "next/link";
 
 import { Button } from "@/components/ui/button";
 
+const features = [
+  {
+    icon: Users,
+    title: "Family and land, together",
+    body: "People, relationships, and life events alongside property and chain-of-title — one documented story of where you come from.",
+  },
+  {
+    icon: BadgeCheck,
+    title: "Sourced or it didn't happen",
+    body: "Every fact can carry a citation back to the record it came from. Sources are first-class, reusable, and visible.",
+  },
+  {
+    icon: ShieldCheck,
+    title: "Yours to keep",
+    body: "Self-hosted and source-available. Living people protected by default. Open formats — export anytime, run it anywhere.",
+  },
+];
+
 export default function Home() {
   return (
-    <div className="space-y-8 py-4">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
-          Where it came from matters
-        </h1>
-        <p className="max-w-prose text-lg text-[var(--muted)]">
-          Trace where you come from — your family <span className="text-bronze">and</span> your
-          land — with every fact linked to a source, on infrastructure you control.
-        </p>
-      </div>
-      <div className="flex flex-wrap gap-3">
-        <Link href="/register">
-          <Button>Create an account</Button>
-        </Link>
-        <Link href="/login">
-          <Button variant="outline">Sign in</Button>
-        </Link>
-      </div>
+    <div className="space-y-20 py-6 sm:py-12">
+      <section className="grid items-center gap-10 sm:grid-cols-[1.3fr_1fr]">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-bronze">
+            Family · Land · Provenance
+          </p>
+          <h1 className="mt-4 text-5xl font-semibold leading-[1.04] tracking-tight sm:text-6xl">
+            Where it came from{" "}
+            <span className="italic text-bronze">matters</span>.
+          </h1>
+          <p className="mt-6 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
+            Trace your family and your land in one place — every name, every parcel, every claim
+            linked to the record it came from. Self-hosted, sourced, and yours to keep.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Link href="/register">
+              <Button size="lg">Create your account</Button>
+            </Link>
+            <Link href="/login">
+              <Button size="lg" variant="outline">
+                Sign in
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        <div className="hidden justify-self-end sm:block">
+          <div className="relative grid h-64 w-64 place-items-center rounded-full border border-[var(--border)] bg-[var(--surface)] shadow-[0_24px_60px_-24px_rgba(160,106,66,0.35)]">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/provenance-mark.svg" alt="" className="h-36 w-36" />
+            <MapPin className="absolute -right-2 top-10 h-7 w-7 text-bronze" />
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-5 sm:grid-cols-3">
+        {features.map((f) => (
+          <div
+            key={f.title}
+            className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[0_1px_2px_rgba(26,26,23,0.04)]"
+          >
+            <div className="grid h-10 w-10 place-items-center rounded-lg bg-bronze/12 text-bronze">
+              <f.icon className="h-5 w-5" />
+            </div>
+            <h2 className="mt-4 text-lg font-semibold">{f.title}</h2>
+            <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">{f.body}</p>
+          </div>
+        ))}
+      </section>
     </div>
   );
 }