Restructure BookNest hero header: bigger title, taller Favorites card, Add Bookmark button

src/App.tsx

@@ -11,7 +11,9 @@ function App() {
   const sidebarWidth = sidebarCollapsed ? 64 : 200
   const location = useLocation()
   const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
-  const heroPaddingTop = location.pathname === '/booknest' ? '240px' : '72px'
+  const heroPaddingTop = location.pathname === '/booknest' ? '90px' : '72px'
+  const heroObjectPosition = location.pathname === '/booknest' ? '54% 8%' : 'center 5%'
+  const topBarHeight = location.pathname === '/booknest' ? 72 : 56
 
   return (
     <div className="min-h-screen w-screen overflow-hidden bg-page">
@@ -32,7 +34,7 @@ function App() {
               className="absolute inset-0 h-full w-full"
               style={{
                 objectFit: 'cover',
-                objectPosition: 'center 5%',
+                objectPosition: heroObjectPosition,
                 maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
                 WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
               }}
@@ -52,7 +54,7 @@ function App() {
 
         <section
           className="relative flex w-full flex-col overflow-hidden"
-          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: showHero ? `${heroPaddingTop} 24px 24px 24px` : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
+          style={{ height: `calc(100vh - ${topBarHeight}px)`, scrollbarWidth: 'none', padding: showHero ? `${heroPaddingTop} 24px 24px 24px` : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
         >
           <Routes>
             <Route path="/" element={<Glance />} />

src/components/TopBar.tsx

@@ -32,14 +32,17 @@ export default function TopBar() {
   }, [])
 
   return (
-    <header className="h-14 flex items-center px-6 sticky top-0 z-40">
+    <header className="flex items-center px-6 sticky top-0 z-40" style={{ height: subtitle ? '72px' : '56px' }}>
       {/* Page Title — pushed away from sidebar edge */}
       <div style={{ marginLeft: '20px' }}>
-        <h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434' }}>
+        <h1
+          className="font-bold uppercase tracking-wide"
+          style={{ color: '#C8A434', fontSize: subtitle ? '28px' : '18px' }}
+        >
           {title}
         </h1>
         {subtitle && (
-          <p className="text-[11px]" style={{ color: '#7A7D85', marginTop: '-2px' }}>
+          <p className="text-[13px]" style={{ color: '#A8A6A0', marginTop: '2px' }}>
             {subtitle}
           </p>
         )}

src/pages/BookNest.tsx

@@ -4,6 +4,7 @@ import {
   Link2,
   FolderOpen,
   Star,
+  Plus,
   Server,
   Bot,
   Cloud,
@@ -269,17 +270,35 @@ export default function BookNest() {
   }
 
   return (
-    <div className="flex h-full w-full flex-col gap-5 overflow-y-auto" style={{ scrollbarWidth: 'none' }}>
+    <div className="flex h-full w-full flex-col overflow-y-auto" style={{ scrollbarWidth: 'none' }}>
-      {/* Page stats */}
+      <div className="grid w-full gap-5" style={{ gridTemplateColumns: '3fr 1fr', gridTemplateRows: 'auto 1fr' }}>
-      <div className="flex items-center gap-5 shrink-0" style={{ fontSize: '12px', color: '#7A7D85' }}>
+        {/* 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' }}>
+          <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>
 
-      <div className="grid w-full gap-5" style={{ gridTemplateColumns: '3fr 1fr' }}>
         {/* Main column */}
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5" style={{ gridColumn: 1, gridRow: 2, marginTop: '20px' }}>
           {/* Quick Access */}
           <div className="grid grid-cols-5 gap-4">
             {quickAccess.map((qa) => (
@@ -317,15 +336,15 @@ export default function BookNest() {
           </div>
         </div>
 
-        {/* Right sidebar */}
+        {/* Right sidebar — spans both rows so Favorites reaches up near the hero */}
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5" style={{ gridColumn: 2, gridRow: '1 / span 2' }}>
-          <div style={cardBase}>
+          <div style={{ ...cardBase, padding: '22px' }}>
-            <h3 style={sectionTitle}>Favorites</h3>
+            <h3 style={{ ...sectionTitle, fontSize: '12px', marginBottom: '18px' }}>Favorites</h3>
-            <div className="flex flex-col" style={{ gap: '2px' }}>
+            <div className="flex flex-col" style={{ gap: '4px' }}>
               {favorites.map((f) => (
-                <div key={f.name} className="flex items-center gap-2.5" style={{ padding: '6px 0' }}>
+                <div key={f.name} className="flex items-center gap-3" style={{ padding: '8px 0' }}>
-                  <f.icon size={15} style={{ color: '#C8A434' }} />
+                  <f.icon size={17} style={{ color: '#C8A434' }} />
-                  <span style={{ fontSize: '12px', color: '#E8E6E0' }}>{f.name}</span>
+                  <span style={{ fontSize: '13px', color: '#E8E6E0' }}>{f.name}</span>
                 </div>
               ))}
             </div>