From 9d7fc518de9c3672dca85bcabb29083d019742db Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 18:27:37 +0000
Subject: [PATCH] Align BookNest header layout closer to blueprint: stats under
 title, Quick Access label

---
 src/App.tsx            |  2 +-
 src/pages/BookNest.tsx | 41 ++++++++++++++++++++++-------------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ec9f69f..ced66cc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,7 @@ function App() {
   const sidebarWidth = sidebarCollapsed ? 64 : 200
   const location = useLocation()
   const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
-  const heroPaddingTop = location.pathname === '/booknest' ? '90px' : '72px'
+  const heroPaddingTop = location.pathname === '/booknest' ? '70px' : '72px'
   const heroObjectPosition = location.pathname === '/booknest' ? '54% 8%' : 'center 5%'
   const topBarHeight = location.pathname === '/booknest' ? 72 : 56
 
diff --git a/src/pages/BookNest.tsx b/src/pages/BookNest.tsx
index 235132f..34c48a4 100644
--- a/src/pages/BookNest.tsx
+++ b/src/pages/BookNest.tsx
@@ -272,34 +272,37 @@ export default function BookNest() {
   return (
     <div className="flex h-full w-full flex-col overflow-y-auto" style={{ scrollbarWidth: 'none' }}>
       <div className="grid w-full gap-5" style={{ gridTemplateColumns: '3fr 1fr', gridTemplateRows: 'auto 1fr' }}>
-        {/* Page stats + Add Bookmark — main column only, so sidebar can rise above it */}
-        <div className="flex items-center justify-between shrink-0" style={{ gridColumn: 1, gridRow: 1, marginTop: '180px' }}>
+        {/* Page stats — sits directly under the hero title/subtitle, like the blueprint */}
+        <div className="flex items-center shrink-0" style={{ gridColumn: 1, gridRow: 1, marginTop: '8px' }}>
           <div className="flex items-center gap-5" style={{ fontSize: '12px', color: '#7A7D85' }}>
             <span className="flex items-center gap-1.5"><Link2 size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>312</strong> Links</span>
             <span className="flex items-center gap-1.5"><FolderOpen size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>18</strong> Categories</span>
             <span className="flex items-center gap-1.5"><Star size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>12</strong> Favorites</span>
           </div>
-          <button
-            className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: '#0A0B0D',
-              backgroundColor: '#C8A434',
-              border: 'none',
-              borderRadius: '8px',
-              padding: '9px 16px',
-              boxShadow: '0 0 14px rgba(200,164,52,0.2)',
-            }}
-          >
-            <Plus size={14} />
-            Add Bookmark
-          </button>
         </div>
 
         {/* Main column */}
-        <div className="flex flex-col gap-5" style={{ gridColumn: 1, gridRow: 2, marginTop: '20px' }}>
+        <div className="flex flex-col gap-5" style={{ gridColumn: 1, gridRow: 2, marginTop: '14px' }}>
           {/* Quick Access */}
+          <div className="flex items-center justify-between">
+            <h3 style={{ ...sectionTitle, marginBottom: 0, color: '#C8A434' }}>Quick Access</h3>
+            <button
+              className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
+              style={{
+                fontSize: '12px',
+                fontWeight: 600,
+                color: '#0A0B0D',
+                backgroundColor: '#C8A434',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '8px 14px',
+                boxShadow: '0 0 14px rgba(200,164,52,0.2)',
+              }}
+            >
+              <Plus size={14} />
+              Add Bookmark
+            </button>
+          </div>
           <div className="grid grid-cols-5 gap-4">
             {quickAccess.map((qa) => (
               <div key={qa.label} style={{ ...cardBase, padding: '14px' }} className="hover:!border-gold/20">