From 40bd0c9ec7ebbdda911bbf52568b44108fe56fe0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 14:45:00 +0000
Subject: [PATCH] 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            |  4 ++--
 src/App.tsx                    | 42 +++++++++++++++++++++-------------
 src/components/Sidebar.tsx     |  2 +-
 src/components/StatusCards.tsx |  6 ++---
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/design-decisions.md b/design-decisions.md
index 99115f4..9b2fff1 100644
--- a/design-decisions.md
+++ b/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
 
diff --git a/src/App.tsx b/src/App.tsx
index f535b1b..969b4a2 100644
--- a/src/App.tsx
+++ b/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' }}>
-                <img
-                  src="/archnest-hero-banner.png"
-                  alt="ArchNest Banner"
-                  className="w-full"
-                  style={{ display: 'block' }}
-                  onError={(e) => {
-                    const target = e.currentTarget
-                    target.style.display = 'none'
-                    target.parentElement!.classList.add('bg-card')
-                    target.parentElement!.style.height = '260px'
-                  }}
-                />
-              </div>
+            <div className="relative w-full overflow-hidden" style={{ height: '260px' }}>
+              <img
+                src="/archnest-hero-banner.png"
+                alt="ArchNest Banner"
+                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')
+                }}
+              />
+              {/* 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 />
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index cd9cb53..e2f5fd4 100644
--- a/src/components/Sidebar.tsx
+++ b/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
diff --git a/src/components/StatusCards.tsx b/src/components/StatusCards.tsx
index 9b6d32d..a185cad 100644
--- a/src/components/StatusCards.tsx
+++ b/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)',