Compact hero and sticky nav for better above-the-fold UX

- Replace two-column hero layout with single-column compact header
- Swap bordered stat cards for inline stat bar
- Add PE mark icon to hero and sticky nav brand
- Remove redundant sidebar (top models, preprint card)
- Remove redundant CTAs (View leaderboard, Explore households)
- Exclude public/paper/ from ESLint, add img-element directives

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: MaxGhenis

app/eslint.config.mjs

@@ -3,7 +3,7 @@ import nextTypeScript from "eslint-config-next/typescript";
 
 const config = [
   {
-    ignores: [".next/**", "dist/**", "node_modules/**", "out/**"],
+    ignores: [".next/**", "dist/**", "node_modules/**", "out/**", "public/paper/**"],
   },
   ...nextCoreWebVitals,
   ...nextTypeScript,

app/src/App.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 
 import Link from "next/link";
@@ -105,20 +106,28 @@ export default function App() {
       />
 
       <nav className="sticky top-0 z-40 border-b border-border bg-bg/90 backdrop-blur-md">
-        <div className="mx-auto flex max-w-7xl items-center gap-4 px-4 sm:px-6">
+        <div className="mx-auto flex max-w-7xl items-center gap-3 px-4 sm:px-6">
           <Link
             href="/"
-            className="shrink-0 py-3 font-[family-name:var(--font-display)] text-lg tracking-tight text-text transition-colors hover:text-primary"
+            className="shrink-0 py-2.5 flex items-center gap-2 transition-colors hover:opacity-80"
           >
-            PolicyBench
+            <img
+              src="/assets/policyengine-mark.svg"
+              alt="PolicyEngine"
+              className="h-5 w-5 opacity-80"
+            />
+            <span className="font-[family-name:var(--font-display)] text-base tracking-tight text-text">
+              PolicyBench
+            </span>
           </Link>
+          <div className="h-4 w-px bg-border shrink-0" />
           <div className="min-w-0 flex-1 overflow-x-auto">
-            <div className="flex min-w-max gap-1">
+            <div className="flex min-w-max gap-0.5">
               {navItems.map((item) => (
                 <a
                   key={item.id}
                   href={`#${item.id}`}
-                  className={`px-3 py-3 text-[11px] font-medium tracking-wider uppercase transition-colors border-b-2 sm:px-4 ${
+                  className={`px-2.5 py-2.5 text-[11px] font-medium tracking-wider uppercase transition-colors border-b-2 sm:px-3.5 ${
                     activeNav === item.id
                       ? "border-primary text-primary"
                       : "border-transparent text-text-secondary hover:text-text"
@@ -134,26 +143,13 @@ export default function App() {
             onSelect={handleSelectView}
             pillClassName="rounded-full text-[10px] px-2.5 py-1 font-medium transition-colors"
           />
-          <div className="flex shrink-0 items-center gap-2">
+          <div className="flex shrink-0 items-center gap-1.5">
             <Link
               href="/paper"
-              className="rounded-full border border-border bg-card px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-text-secondary transition-colors hover:border-primary/40 hover:text-primary"
+              className="rounded-full border border-border bg-card px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-text-secondary transition-colors hover:border-primary/40 hover:text-primary"
             >
               Paper
             </Link>
-            <a
-              href="https://policyengine.org"
-              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-2.5 py-1.5 text-[11px] font-medium uppercase tracking-wider text-text-secondary transition-colors hover:border-primary/40 hover:text-primary"
-              aria-label="By PolicyEngine"
-              title="By PolicyEngine"
-            >
-              <span>by</span>
-              <img
-                src="/assets/policyengine-logo.svg"
-                alt="PolicyEngine"
-                className="h-3 w-auto"
-              />
-            </a>
           </div>
         </div>
       </nav>

app/src/app/paper/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 
 const manuscriptPaths = {