Add hero banner blend and subtitle to BookNest page

src/App.tsx

@@ -10,7 +10,7 @@ function App() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
   const sidebarWidth = sidebarCollapsed ? 64 : 200
   const location = useLocation()
-  const showHero = location.pathname === '/infrastructure'
+  const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
 
   return (
     <div className="min-h-screen w-screen overflow-hidden bg-page">

src/components/TopBar.tsx

@@ -10,11 +10,16 @@ const pageTitles: Record<string, string> = {
   '/settings': 'Settings',
 }
 
+const pageSubtitles: Record<string, string> = {
+  '/booknest': 'Your Digital Library',
+}
+
 export default function TopBar() {
   const [userMenuOpen, setUserMenuOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
   const location = useLocation()
   const title = pageTitles[location.pathname] ?? 'Glance'
+  const subtitle = pageSubtitles[location.pathname]
 
   useEffect(() => {
     function handleClick(e: MouseEvent) {
@@ -29,9 +34,16 @@ export default function TopBar() {
   return (
     <header className="h-14 flex items-center px-6 sticky top-0 z-40">
       {/* Page Title — pushed away from sidebar edge */}
-      <h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434', marginLeft: '20px' }}>
-        {title}
-      </h1>
+      <div style={{ marginLeft: '20px' }}>
+        <h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434' }}>
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="text-[11px]" style={{ color: '#7A7D85', marginTop: '-2px' }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
 
       {/* Center section — Search bar */}
       <div className="flex-1 flex justify-center">