From 8f2962eb13b2a6846276233f7bc66088e9f7ffe0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 16:26:10 +0000
Subject: [PATCH] Add seamless hero banner to Infrastructure page

Fades the banner image into the page background using a mask gradient
and radial vignette, matching the borderless blend technique from Glance.
---
 src/pages/Infrastructure.tsx | 97 ++++++++++++++++++++++--------------
 1 file changed, 59 insertions(+), 38 deletions(-)

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 2e1d706..4e95879 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -117,46 +117,67 @@ export default function Infrastructure() {
 
   return (
     <>
-      {/* Sub-tabs + Add Resource */}
-      <div className="flex items-center justify-between shrink-0">
-        <div className="flex items-center gap-1 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
-          {subTabs.map((tab) => {
-            const active = tab === activeTab
-            return (
-              <button
-                key={tab}
-                onClick={() => setActiveTab(tab)}
-                className="cursor-pointer bg-transparent border-none transition-colors whitespace-nowrap"
-                style={{
-                  fontSize: '12px',
-                  fontWeight: 500,
-                  padding: '8px 14px',
-                  borderRadius: '8px',
-                  color: active ? '#C8A434' : '#7A7D85',
-                  backgroundColor: active ? 'rgba(200,164,52,0.1)' : 'transparent',
-                }}
-              >
-                {tab}
-              </button>
-            )
-          })}
-        </div>
-        <button
-          className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
+      {/* Hero banner — faded seamlessly into the page background, no hard edges */}
+      <div className="relative w-full shrink-0 overflow-hidden" style={{ height: '140px', margin: '-16px -24px 0 -24px' }}>
+        <img
+          src="/archnest-hero-banner.png"
+          alt=""
+          className="absolute inset-0 h-full w-full"
           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)',
+            objectFit: 'cover',
+            objectPosition: 'center 30%',
+            maskImage: 'linear-gradient(to bottom, transparent 0%, black 25%, black 55%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 25%, black 55%, transparent 100%)',
           }}
-        >
-          <Plus size={14} />
-          Add Resource
-        </button>
+        />
+        <div
+          className="pointer-events-none absolute inset-0"
+          style={{
+            background: 'radial-gradient(ellipse 70% 100% at center, transparent 40%, var(--color-page) 100%)',
+          }}
+        />
+
+        {/* Sub-tabs + Add Resource, overlaid on the banner */}
+        <div className="absolute bottom-0 left-0 right-0 z-10 flex items-center justify-between" style={{ padding: '0 24px 12px 24px' }}>
+          <div className="flex items-center gap-1 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
+            {subTabs.map((tab) => {
+              const active = tab === activeTab
+              return (
+                <button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className="cursor-pointer bg-transparent border-none transition-colors whitespace-nowrap"
+                  style={{
+                    fontSize: '12px',
+                    fontWeight: 500,
+                    padding: '8px 14px',
+                    borderRadius: '8px',
+                    color: active ? '#C8A434' : '#7A7D85',
+                    backgroundColor: active ? 'rgba(200,164,52,0.1)' : 'transparent',
+                  }}
+                >
+                  {tab}
+                </button>
+              )
+            })}
+          </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 Resource
+          </button>
+        </div>
       </div>
 
       {/* Status Cards */}