sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add seamless hero banner to Infrastructure page

Browse source 
Fades the banner image into the page background using a mask gradient
and radial vignette, matching the borderless blend technique from Glance.
This commit is contained in:
Claude 2026-06-18 16:26:10 +00:00
parent ec04f568dd
commit 8f2962eb13
No known key found for this signature in database
1 changed files with 59 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/pages/Infrastructure.tsx
View file

@ -117,8 +117,28 @@ export default function Infrastructure() {
return (
<>
{/* Sub-tabs + Add Resource */}
<div className="flex items-center justify-between shrink-0">
{/* 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={{
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">