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

@@ -117,8 +117,28 @@ export default function Infrastructure() {
 
   return (
     <>
-      {/* Sub-tabs + Add Resource */}
+      {/* Hero banner — faded seamlessly into the page background, no hard edges */}
-      <div className="flex items-center justify-between shrink-0">
+      <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={{
+            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%)',
+          }}
+        />
+        <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
@@ -158,6 +178,7 @@ export default function Infrastructure() {
             Add Resource
           </button>
         </div>
+      </div>
 
       {/* Status Cards */}
       <div className="grid w-full grid-cols-5 gap-5 shrink-0">