52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
|
import StatusCards from '../components/StatusCards'
|
||
|
|
import MiddleRow from '../components/MiddleRow'
|
||
|
|
import BottomRow from '../components/BottomRow'
|
||
|
|
|
||
|
|
export default function Glance() {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
|
||
|
|
<div className="relative w-full shrink-0 overflow-hidden" style={{ height: '240px' }}>
|
||
|
|
<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 />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Middle Row — stretches to fill available vertical space */}
|
||
|
|
<div className="min-h-0 flex-1">
|
||
|
|
<MiddleRow />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Bottom Row — anchored to the bottom */}
|
||
|
|
<div className="shrink-0">
|
||
|
|
<BottomRow />
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|