feat: Layout rework

web2/src/app/about/beneficiaries/page.tsx

@@ -0,0 +1,61 @@
+import type { Metadata } from "next";
+import { AboutSectionNav } from "@/components/about-section-nav";
+import { audiences } from "@/lib/about-content";
+
+export const metadata: Metadata = {
+  title: "Beneficiaries",
+  description:
+    "Who Physlib is for — researchers, students, companies, and labs working with physics and formal methods.",
+};
+
+export default function BeneficiariesPage() {
+  return (
+    <div className="mx-auto w-full max-w-4xl px-5 sm:px-8 py-12 md:py-16">
+
+      <p className="label-mono text-muted mb-5">About</p>
+      <h1
+        className="text-4xl font-medium text-foreground mb-6 md:text-5xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.06 }}
+      >
+        Beneficiaries
+      </h1>
+      <p
+        className="max-w-3xl text-2xl font-medium text-foreground mb-12 md:text-3xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.15 }}
+      >
+        For physicists and formal-methods researchers.
+      </p>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {audiences.map((a) => (
+          <div
+            key={a.title}
+            className="rounded border border-border bg-background p-7 shadow-together"
+          >
+            <p className="label-mono text-muted mb-3">{a.tag}</p>
+            <h2
+              className="text-xl font-medium text-foreground mb-6"
+              style={{ letterSpacing: "-0.025em" }}
+            >
+              {a.title}
+            </h2>
+            <ul className="space-y-4">
+              {a.items.map((item) => (
+                <li
+                  key={item}
+                  className="flex items-start gap-4 text-sm text-muted"
+                  style={{ letterSpacing: "-0.01em" }}
+                >
+                  <span className="flex-shrink-0 text-accent">—</span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      <AboutSectionNav current="/about/beneficiaries" />
+    </div>
+  );
+}

web2/src/app/about/impact/page.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import { AboutSectionNav } from "@/components/about-section-nav";
+import { impacts, paper } from "@/lib/about-content";
+
+export const metadata: Metadata = {
+  title: "Impact",
+  description:
+    "Why formalize physics — what a library of digitalized physics results makes possible.",
+};
+
+export default function ImpactPage() {
+  return (
+    <div className="mx-auto w-full max-w-4xl px-5 sm:px-8 py-12 md:py-16">
+
+      <p className="label-mono text-muted mb-5">About</p>
+      <h1
+        className="text-4xl font-medium text-foreground mb-6 md:text-5xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.06 }}
+      >
+        Impact
+      </h1>
+      <p
+        className="max-w-3xl text-2xl font-medium text-foreground mb-12 md:text-3xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.15 }}
+      >
+        Why formalize physics?
+      </p>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {impacts.map((item, i) => (
+          <div
+            key={i}
+            className="flex gap-5 rounded p-6 bg-background border border-border shadow-together"
+          >
+            <span
+              className="text-2xl font-medium text-accent/40 font-mono flex-shrink-0 leading-none tabular-nums"
+              style={{ letterSpacing: "-0.04em" }}
+            >
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <p
+              className="text-sm text-muted leading-relaxed"
+              style={{ letterSpacing: "-0.01em" }}
+            >
+              {item}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <p className="mt-10 text-sm text-foreground/30">
+        Read the paper:{" "}
+        <a
+          href={paper.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-foreground/60 transition-colors underline underline-offset-2"
+        >
+          {paper.label}
+        </a>
+      </p>
+
+      <AboutSectionNav current="/about/impact" />
+    </div>
+  );
+}

web2/src/app/about/mission/page.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { AboutSectionNav } from "@/components/about-section-nav";
+import { missionStatement, visionPoints } from "@/lib/about-content";
+
+export const metadata: Metadata = {
+  title: "Mission",
+  description: missionStatement,
+};
+
+export default function MissionPage() {
+  return (
+    <div className="mx-auto w-full max-w-4xl px-5 sm:px-8 py-12 md:py-16">
+
+      <p className="label-mono text-muted mb-5">About</p>
+      <h1
+        className="text-4xl font-medium text-foreground mb-6 md:text-5xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.06 }}
+      >
+        Mission
+      </h1>
+      <p
+        className="max-w-3xl text-2xl font-medium text-foreground mb-14 md:text-3xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.15 }}
+      >
+        Create a library of digitalized physics results in Lean&nbsp;4,
+        useful to the broad physics community.
+      </p>
+
+      <div className="grid gap-x-16 gap-y-5 sm:grid-cols-2">
+        {visionPoints.map((point, i) => (
+          <div key={i} className="flex items-start gap-5">
+            <span className="label-mono text-accent/50 flex-shrink-0 pt-0.5">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <p
+              className="text-sm text-muted leading-relaxed"
+              style={{ letterSpacing: "-0.01em" }}
+            >
+              {point}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <AboutSectionNav current="/about/mission" />
+    </div>
+  );
+}

web2/src/app/about/page.tsx

@@ -0,0 +1,75 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { aboutSections, paper } from "@/lib/about-content";
+import { site } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: "About",
+  description:
+    "The mission, values, beneficiaries, and intended impact of Physlib — a library of digitalized physics results in Lean 4.",
+};
+
+export default function AboutPage() {
+  return (
+    <div className="mx-auto w-full max-w-4xl px-5 sm:px-8 py-12 md:py-16">
+
+      {/* Page intro */}
+      <p className="label-mono text-muted mb-5">About</p>
+      <h1
+        className="text-4xl font-medium text-foreground mb-4 md:text-5xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.06 }}
+      >
+        About Physlib
+      </h1>
+      <p
+        className="text-lg text-muted max-w-2xl mb-14 leading-snug"
+        style={{ letterSpacing: "-0.01em", lineHeight: 1.4 }}
+      >
+        {site.description}
+      </p>
+
+      {/* Section index */}
+      <div className="grid gap-4 sm:grid-cols-2">
+        {aboutSections.map((s, i) => (
+          <Link
+            key={s.href}
+            href={s.href}
+            className="group flex flex-col rounded border border-border bg-background p-6 shadow-together transition-colors hover:bg-foreground/5"
+          >
+            <span className="label-mono text-accent/50 mb-4">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <span
+              className="text-xl font-medium text-foreground mb-2"
+              style={{ letterSpacing: "-0.025em" }}
+            >
+              {s.label}
+            </span>
+            <span
+              className="text-sm text-muted leading-relaxed flex-1"
+              style={{ letterSpacing: "-0.01em" }}
+            >
+              {s.tagline}
+            </span>
+            <span className="mt-5 text-xs text-muted transition-colors group-hover:text-foreground">
+              Read more →
+            </span>
+          </Link>
+        ))}
+      </div>
+
+      {/* Paper */}
+      <div className="mt-16 border-t border-border pt-8 text-sm text-foreground/30">
+        Read the paper:{" "}
+        <a
+          href={paper.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-foreground/60 transition-colors underline underline-offset-2"
+        >
+          {paper.label}
+        </a>
+      </div>
+    </div>
+  );
+}

web2/src/app/about/values/page.tsx

@@ -0,0 +1,57 @@
+import type { Metadata } from "next";
+import { AboutSectionNav } from "@/components/about-section-nav";
+import { values } from "@/lib/about-content";
+
+export const metadata: Metadata = {
+  title: "Values",
+  description:
+    "The principles Physlib is built on — welcoming, open and transparent, accessible and practical.",
+};
+
+export default function ValuesPage() {
+  return (
+    <div className="mx-auto w-full max-w-4xl px-5 sm:px-8 py-12 md:py-16">
+
+      <p className="label-mono text-muted mb-5">About</p>
+      <h1
+        className="text-4xl font-medium text-foreground mb-6 md:text-5xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.06 }}
+      >
+        Values
+      </h1>
+      <p
+        className="max-w-3xl text-2xl font-medium text-foreground mb-12 md:text-3xl"
+        style={{ letterSpacing: "-0.04em", lineHeight: 1.15 }}
+      >
+        Built on principles.
+      </p>
+
+      <div className="divide-y divide-border border-t border-border">
+        {values.map((v, i) => (
+          <div
+            key={v.title}
+            className="grid grid-cols-[2.5rem_1fr] md:grid-cols-[3rem_16rem_1fr] gap-x-8 md:gap-x-12 py-8 items-start"
+          >
+            <span className="label-mono text-accent pt-1">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <h2
+              className="text-lg font-medium text-foreground"
+              style={{ letterSpacing: "-0.025em" }}
+            >
+              {v.title}
+            </h2>
+            <p
+              className="col-start-2 md:col-start-3 mt-3 md:mt-0 text-sm text-muted leading-relaxed"
+              style={{ letterSpacing: "-0.01em" }}
+            >
+              {v.body}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <AboutSectionNav current="/about/values" />
+    </div>
+  );
+}

web2/src/app/documentation-tracker/page.tsx

@@ -28,7 +28,7 @@ export default function DocumentationTrackerPage() {
 
       <div className="mt-10 flex flex-col gap-6">
         <section>
-          <h2 className="text-xl font-semibold mb-3">
+          <h2 id="steps-to-help-with-documentation" className="text-xl font-semibold mb-3 scroll-mt-24">
             Steps to Help with Documentation
           </h2>
           <p className="text-sm text-muted mb-4">
@@ -38,7 +38,9 @@ export default function DocumentationTrackerPage() {
 
           {docSteps.map((step) => (
             <div key={step.title} className="mb-6">
-              <h3 className="font-semibold mb-2">{step.title}</h3>
+              <h3 id={slugify(step.title)} className="font-semibold mb-2 scroll-mt-24">
+                {step.title}
+              </h3>
               <ol className="list-decimal ml-5 space-y-1 text-sm text-foreground/90">
                 {step.items.map((item, i) => (
                   <li key={i} dangerouslySetInnerHTML={{ __html: item }} />
@@ -52,6 +54,10 @@ export default function DocumentationTrackerPage() {
   );
 }
 
+function slugify(title: string) {
+  return title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+
 const docSteps = [
   {
     title: "Phase 1: Get the Code",