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

97
src/pages/Infrastructure.tsx
View file

@ -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 */}