Widen sidebar and seamlessly blend hero banner into background

Sidebar expanded width 140px -> 200px and collapsed 60px -> 64px to
match mockup proportions. Hero banner now uses a fixed shorter height
with object-fit cover, a bottom mask fade, and a radial vignette so
its edges blend into the page background instead of sitting in a
bordered box. KPI cards are now semi-transparent so the hero image
bleeds through behind them.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF

design-decisions.md

@@ -8,8 +8,8 @@
 ## Global Rules (Apply to Every Page)
 
 ### Sidebar
-- **Expanded width**: 100px (not 80px — needs room for labels)
-- **Collapsed width**: 60px (icon only)
+- **Expanded width**: 200px (matches mockup proportions — needs room for labels)
+- **Collapsed width**: 64px (icon only)
 - **User can manually collapse/expand** via toggle button (not just responsive)
 - **Main content margin-left** must match sidebar width exactly
 

src/App.tsx

@@ -7,7 +7,7 @@ import BottomRow from './components/BottomRow'
 
 function App() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-  const sidebarWidth = sidebarCollapsed ? 60 : 140
+  const sidebarWidth = sidebarCollapsed ? 64 : 200
 
   return (
     <div className="min-h-screen w-screen overflow-hidden bg-page">
@@ -28,21 +28,31 @@ function App() {
         >
           <div className="flex w-full max-w-none flex-col gap-0">
             {/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
-            <div className="relative">
-              <div className="w-full overflow-hidden" style={{ borderRadius: '12px 12px 0 0' }}>
+            <div className="relative w-full overflow-hidden" style={{ height: '260px' }}>
               <img
                 src="/archnest-hero-banner.png"
                 alt="ArchNest Banner"
-                  className="w-full"
-                  style={{ display: 'block' }}
+                className="absolute inset-0 h-full w-full"
+                style={{
+                  objectFit: 'cover',
+                  objectPosition: 'center 35%',
+                  maskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
+                  WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
+                }}
                 onError={(e) => {
                   const target = e.currentTarget
                   target.style.display = 'none'
                   target.parentElement!.classList.add('bg-card')
-                    target.parentElement!.style.height = '260px'
                 }}
               />
-              </div>
+              {/* Side vignette so the rectangular image blends into the page edges */}
+              <div
+                className="pointer-events-none absolute inset-0"
+                style={{
+                  background:
+                    'radial-gradient(ellipse 75% 100% at center, transparent 55%, var(--color-page) 100%)',
+                }}
+              />
               {/* KPI cards positioned so their bottom edge aligns with banner bottom */}
               <div className="absolute bottom-0 left-0 right-0 z-10 px-4">
                 <StatusCards />

src/components/Sidebar.tsx

@@ -24,7 +24,7 @@ const navItems = [
 ]
 
 export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
-  const width = collapsed ? 60 : 140
+  const width = collapsed ? 64 : 200
 
   return (
     <aside

src/components/StatusCards.tsx

@@ -3,9 +3,9 @@ import SparklineChart from './SparklineChart'
 import ProgressRing from './ProgressRing'
 
 const cardStyle: React.CSSProperties = {
-  backgroundColor: 'rgba(10, 10, 12, 0.92)',
-  backdropFilter: 'blur(14px)',
-  border: '1px solid rgba(200, 164, 52, 0.08)',
+  backgroundColor: 'rgba(10, 10, 12, 0.55)',
+  backdropFilter: 'blur(10px)',
+  border: '1px solid rgba(200, 164, 52, 0.1)',
   borderRadius: '12px',
   padding: '16px',
   boxShadow: '0 0 20px rgba(200, 164, 52, 0.03)',