Add hero banner blend and subtitle to BookNest page

This commit is contained in:
Claude 2026-06-18 18:13:26 +00:00
parent 2bc140db33
commit 87e8422563
No known key found for this signature in database
2 changed files with 16 additions and 4 deletions

View file

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

View file

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